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

Ответ 2 · рейтинг 7 · Eric

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

Ответ 3 · рейтинг 5 · a avant

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

Ответ 4 · рейтинг 3 · Hammad

Бывает со мной. JPG отображается в IE, но не в Firefox или Chrome. Вот решение

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

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

Ответ 5 · рейтинг 3 · ramon22

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

Ответ 6 · рейтинг 1 · Philip Morton

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

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

Ответ 7 · рейтинг 1 · GateKiller

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

Ответ 8 · рейтинг 1 · Mike Geise

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

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

Ответ 9 · рейтинг 1 · Astravagrant

Вместо того, чтобы использовать 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');

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

Ответ 10 · рейтинг 1 · Randall

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

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

Ответ 11 · рейтинг 1 · Stuart

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

Ответ 12 · рейтинг 1 · Haim

У меня была аналогичная проблема. Причина в том, что 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;
}