Фоновое изображение не отображается в Firefox

Question

Изображение, установленное в качестве фона DIV, отображается в IE, но не в Firefox.

Пример CSS:

div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}

(Проблема описана во многих местах, но не было найдено ни одного убедительного объяснения или исправления.)

Answer 1

Извините, это стало огромным, но оно охватывает две возможности, которые постоянно происходят со мной.

Возможность 1

Возможно, путь к файлу CSS указан неверно. Например:

Скажем, у меня следующая файловая структура:

public/
    css/
        global.css
    images/
        background.jpg
    something/
        index.html
    index.html

На public/index.html следующие пути будут включать файл CSS:

#1:  <link href="./css/global.css"
#2:  <link href="/css/global.css"
#3:  <link href="css/global.css"

Однако на public/something/index.html номер 1 и 3 потерпит неудачу. Если вы используете подобную структуру каталогов (или структуру MVC, например: http://localhost/controller/action/params), используйте второй тип href.

Вкладка «Сетевой монитор» Firebug сообщит вам, нельзя ли включить файл CSS.

По вопросу путей помните, что изображения относятся к пути файла CSS. Итак:

url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */

Наведите указатель мыши на часть url() атрибута background на вкладке CSS Firebug, чтобы проверить, загружается ли файл.

Возможность 2

Возможно, div не имеет содержимого и, следовательно, имеет высоту 0. Убедитесь, что в div есть хотя бы строка чего-то (например: lorem ipsum delors secorum) или:

div.something {
    display: block; /* for verification */
    min-height: 50px;
    min-width: 50px;
}

Проверьте вкладку макета Firebug (вкладки HTML), чтобы убедиться, что div имеет высоту / ширину.

Answer 2

Как ни странно, после того, как часами разбивал голову о клавиатуру, я добавил display: table; в стиле DIV и фоновое изображение волшебным образом появилось в FF.

Answer 3

Это похоже на проблему с вложением фона. Он должен быть установлен на фиксированный (не прокрутка) для работы в FF. Смотри: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position

Answer 4

Случись со мной. JPG показывает в IE, но не в Firefox или Chrome. Вот решение

Измените следующий CSS для элемента, где отображается изображение. Это может быть span, div или любой другой элемент:

дисплей: блок

Answer 5

Убедитесь, что изображение, на которое вы ссылаетесь, относится к файлу CSS, а не к HTML-файлу.

Answer 6

попробуйте это.

background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;

Answer 7

Вместо использования URL-адресов относительно страницы / таблицы стилей, кросс-браузерное решение заключается в том, чтобы дать относительный URL-адрес, начиная с корня приложения / домена.

/* Relative to Stylesheet (Works in Firefox) */
background: url('../images/logo.gif');
/* Relative to Page (Works in IE, Chrome etc.) */
background: url('images/logo.gif');
/* Absolute path (Fine, unless you change domains)*/
background: url('http://www.webby.com/myproduct/images/factsheet.gif');
/* Domain Root-relative path (Works in Firefox, IE, Chrome and Opera) */
background: url('/myproduct/images/factsheet.gif');

К вашему сведению: Насколько я понимаю, нет необходимости использовать кавычки в CSS-URL, я использовал их здесь, потому что это выглядит красивее.

Answer 8

Попробуйте ввести название изображения в кавычках, например ::100100

background-image: url('image.jpg');

Answer 9

Для меня дело в том, что имя файла чувствительно к регистру. Я не уверен, был ли это CSS, или это была моя операционная система Ubuntu, или это был Firefox, но я наконец-то получил фоновые изображения для отображения, ссылаясь на BlueGrad.jpg вместо bluegrad.jpg Бывший из двух, как это было спасено. Я не думал, что это будет чувствительно к регистру, но это было.

Answer 10

Я решил похожую проблему, переименовав класс CSS. MSIE позволяет идентификаторам классов CSS начинаться с цифр; Firefox нет. Я создал класс, используя ширину изображения в пикселях, например, .1594px-01a

Я действительно знал, что это нестандартный синтаксис, но так как он работал нормально в MSIE, я забыл об этом. Перепробовав все остальное, я наконец осознал, что это может быть просто, как назвать, и как только я поставлю перед классом письмо, presto!