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

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

Пример CSS:

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

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

Ответы

Ответ 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 Net" сообщит вам, не может ли файл 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 имеет высоту/ширину.

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

Вы можете попробовать следующее:

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

Другие объявления - это стенографические свойства CSS, и я их не нужен.
У вас есть это где-то в Интернете? Я хотел бы посмотреть, смогу ли я немного поиграть с ним. (Локально)

Ответ 11

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

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

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

Установили ли вы Firebug и посмотрели определения CSS на странице?

Ответ 12

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

Мне интересно, может ли IE позволить вам уйти с чем-то другим браузером.

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

Ответ 13

Вот этот базовый тег HTML, как в

<head>
   <base href="http://example.com/some/bizarre/directory"/>
</head>

Если это присутствует на вашей странице, изображение для URL-адреса не относится к вашему текущему URL-адресу, а относится к данному базовому URL-адресу. Я бы не знал, почему IE отображает его, а Firefox - нет.

Webdeveloper Расширение Firefox предоставляет возможность "Отображать разбитые изображения" - это может пригодиться. Кроме того, вы можете попробовать " Live Http Headers", чтобы узнать, запрашивается ли/какое изображение и что такое код возврата.

Ответ 14

У меня была аналогичная проблема относительно свойства background-image CSS в FF. Он работал нормально в IE, но отказался работать в FF;) После прочтения нескольких сообщений я установил, что проблема в том, что в div не было содержимого, кроме таблицы (я пытался сделать фоновое изображение отрегулированным до размера от броузера, не сворачиваясь или расширяясь, и поэтому использовал гораздо больший образ на фоне div для того, чтобы сформировать "обрезку".) Решение для меня, похоже, было просто "обмануть", поместив тег img, который отобразился пустой .png файл, который я затем перенастроил на правильную высоту изображения с шириной, установленной на 100%. Это сработало для моей проблемы, и я надеюсь, что это поможет любому, кто сталкивается с подобной проблемой. Наверное, не самое лучшее исправление, но это исправление;)

Ответ 15

Единственное, что я могу придумать, помимо того, что уже было сказано, это способ создания картины. Если вы сделали/отредактировали изображение в Photoshop, убедитесь, что вы сохранили его как Сохранить для Интернета...

Иногда, если вы используете JPG-образ для Photoshop без сохранения в виде веб-образа, он может не отображаться в Firefox. У меня это случилось несколько недель назад, когда графический художник создал красивый заголовок для мини-сайта и не появлялся в FF!

Подождите...

Попробуйте установить ширину и высоту в div, чтобы развернуть его. Это может быть проблема без содержания в вашем div.

Ответ 16

Вместо использования 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');

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

Ответ 17

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

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

Например,

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

Произойдет эта ошибка. Исправление может быть:

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

Ответ 18

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

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

Ответ 19

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

Ответ 20

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

#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;
}

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

[править] Я сделал отдельную запись > fooobar.com/questions/79904/...

Ответ 21

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

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

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

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

(В ретроспективе может быть даже более элегантный метод, чем раньше...)

Ответ 22

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

Ответ 23

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

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

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

Ответ 24

У меня была похожая проблема. Причина в том, что Firefox чувствителен к отсутствующим полям в вашем CSS. Chrome (иногда) автоматически заполняет пропущенное поле, поэтому проблема появляется в вашем браузере Firefox.

Вам нужно добавить тип отображения, потому что сейчас он переводится в 0 высоту.

В моем случае:

.left-bg-image {
    display: block; // add this line

    background-image: url('../images/profile.jpeg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    opacity: .6;
    min-width: 100%;
    min-height: 100vh;
}

Ответ 25

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

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

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

Привет

Martin