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

Question

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

Пример CSS:

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

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

Answer 1

Старый пост, но у меня просто была похожая проблема: изображения не отображаются в Firefox, оказалось, что это было дополнение к рекламному блоку, пришлось изменить названия моих изображений

Answer 2

(Не похоже, что это точные обстоятельства, связанные с ОП, но проблема в некоторой степени связана, и я нашел обходной путь для этого, которым я хочу поделиться)

У меня была такая же проблема - фоновое изображение видно везде, кроме Firefox - и для меня проблема была связана с тем, что я работаю над надстройкой браузера.

Я внедряю файл style.css в модуль pageMod с атрибутом contentStyleFile. В нем есть правило background-image: url(/img/editlist.png);, где я ссылаюсь на файл изображения external на дополнение. Проблема в том, что Firefox, в отличие от других браузеров, неправильно интерпретирует этот корень внешнего домена как внутренний корень дополнения!

Файл css представляет собой порт 1: 1 из версии расширения / надстройки Chrome, поэтому я не хотел с ним возиться. Вот почему я добавил дополнительное правило contentStyle в сочетании с копией этого изображения в моей папке ресурсов. Это правило просто перезаписывает правило внутри css-файла.

(Оглядываясь назад, может быть, даже более элегантный метод, чем раньше ...)

Answer 3

Это может выглядеть очень странно, но это работает для меня>

#hwrap {
background-color: #d5b75a;
background: url("..//design/bg_header_daddy.png"), url("..//design/nasty_fabric.png");
background-position: 50% 50%, top left;
background-origin: border-box, border-box;
background-repeat: no-repeat, repeat;
}

Да, двойная точка и двойной слеш ... ?? !! ?? ... Я не могу найти в Интернете ничего, что сообщало бы об этом странном поведении.

[править] Я сделал отдельный пост> https://stackoverflow.com/q/18342019/529802

Answer 4

Боюсь, больше вопросов, чем ответов, но они могут помочь вам найти правильный ответ:

Возможно ли, что вы свернули div в Firefox каким-то образом (с некоторыми числами или подобными)?

Есть ли какой-либо другой контент в div, чтобы он был достаточно большим для отображения изображения?

Вы установили Firebug и взглянули на определения CSS на странице?

Answer 5

Моя ошибка заключалась в том, чтобы использовать '\' вместо '/'. Работает нормально в IE, но не в других браузерах.

Answer 6

Я нашел две вещи, которые вызывали эту проблему:

1. Я использовал файл .tif, который, похоже, не понравился Firefox - я изменил файл .png.
2. Я добавил overflow:auto; в CSS для div - display:block; не работает для меня.

Answer 7

Это сработало для меня:

1) Нажмите на таблицу фоновых изображений.
2) Щелкните правой кнопкой мыши строку состояния в нижней части страницы.
3) Нажмите Встроенные стили.
4) Откройте вкладку «Стили фона».
5) Если вы видите «Прозрачный» в заголовке цвета, это проблема.
6) Нажмите на поле цвета и выберите цвет (белый - хороший выбор.)
7) Название цвета теперь должно быть белым.
8) Нажмите ОК.
9) Сохраните страницу.
10) Загрузите страницу и перезапишите существующий файл.
11) Обновите страницу, и отобразится фоновая картинка.

Примечание: убедитесь, что вы загрузили фоновое изображение в формате JPEG. Я забыл загрузить фоновый JPEG один раз и потратил целую вечность, пытаясь отсортировать его, прежде чем понял свою ошибку.

Привет

Martin

Answer 8

Для тех, кто сталкивается с проблемой в FF, но не в Chrome:

Вы можете ошибочно смешать разные типы значений для позиции.

Например,

background: transparent url("/my/image.png") right 60%  no-repeat;

Сделаю эту ошибку. Исправление может быть:

background: transparent url("/my/image.png") 100% 60%  no-repeat;

Answer 9

Никто не упомянул background-origin , так что вы идете:

background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;

Решил проблему для меня; мой фон, очевидно, был за пределами моего div.

Answer 10

Вы абсолютно уверены, что изображение является файлом JPG, а не файлом PNG / Other?

Мне интересно, позволяет ли IE вам покончить с чем-то, чего нет у других браузеров?

Аналогично, регистр файлов точно соответствует указанному?