Фоновое изображение не отображается в Firefox
Изображение, установленное в качестве фона для DIV, отображается в IE, но не в Firefox.
Пример CSS:
div.something {
background:transparent url(../images/table_column.jpg) repeat scroll 0 0;
}
(Проблема описана во многих местах, но не было найдено убедительного объяснения или исправления.)
У вас есть ссылка на одно из мест, где описана проблема?
путь к файлу изображения относительно файла CSS?
Почему нет принятого ответа ??
Ответы 26
Вы можете попробовать это:
div.something {
background: transparent url(../images/table_column.jpg);
}
Другие объявления - это сокращенные свойства CSS, и я думаю, они не нужны. У вас есть это где-нибудь в Интернете? Я бы хотел посмотреть, смогу ли я немного поиграться с этим. (локально)
Я пытался воспроизвести его сам, но пока не смог ... HTML создается сторонним программным обеспечением, поэтому его сложно отлаживать. Я подозреваю, что проблема связана со структурой каталогов на сервере.
Попробуйте заключить имя изображения в кавычки, например:
background-image: url('image.jpg');
Я никогда этого не делаю. D:. Должен ли я?
Я был на 100% уверен, что в CSS такого делать не стоит. (x) HTML, хорошо, а CSS? Действительно запутались.
Боюсь, что вопросов больше, чем ответов, но они могут помочь вам найти правильный ответ:
Возможно ли, что вы каким-то образом сворачиваете div в Firefox (с некоторыми числами с плавающей запятой или подобными)?
Есть ли в div какой-либо другой контент, чтобы он был достаточно большим для отображения изображения?
Вы установили Firebug и просмотрели определения CSS на странице?
У меня есть Firebug, и я просмотрел определения CSS. Я также пытался воспроизвести проблему локально, но безуспешно. За исключением некоторых недостающих кавычек (они есть) или некоторых странных опций css, я предполагаю, что это связано со структурой каталогов на сервере.
Вы абсолютно уверены, что это изображение в формате JPG, а не в формате PNG или другом?
Мне интересно, позволяет ли IE вам избежать неприятностей с другими браузерами.
Точно так же регистр файлов соответствует указанному?
Вот этот HTML-тег "base", как в
<head>
<base href = "http://example.com/some/bizarre/directory"/>
</head>
Если это присутствует на вашей странице, изображение для URL-адреса не относительно вашего текущего URL-адреса, а для данного базового URL-адреса. Я бы не знал, почему IE отображает его, а Firefox - нет.
Расширение Веб-разработчик Firefox предоставляет возможность «Показывать битые изображения» - это может пригодиться. Кроме того, вы можете попробовать «Заголовки Live Http», чтобы узнать, запрашивается ли / какое изображение и каков код возврата.
Убедитесь, что изображение, о котором вы говорите, относится к файлу css, а не к файлу html.
попробуй это.
background-color: transparent;
background-image: url("/path/to/image/file.jpg");
background-repeat: repeat;
background-position: top;
background-attachment: scroll;
Его метод стенографии в порядке (при условии, что он был скопирован и вставлен).
Извините, это стало огромным, но это покрывает две возможности, которые постоянно случаются со мной.
Возможность 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.
Вкладка Net monitor Firebug сообщит вам, нельзя ли включить файл CSS.
Что касается путей, помните, что изображения относятся к пути к файлу CSS. Так:
url('./images/background.jpg') /* won't work */
url('../images/background.jpg') /* works: ../ == up one level */
Наведите указатель мыши на часть url() атрибута фона на вкладке CSS Firebug, чтобы проверить, загружается ли файл.
Возможность 2
Может случиться так, что div не имеет содержимого и поэтому имеет нулевую высоту. Убедитесь, что в div есть хотя бы строчка чего-то (например: lorem ipsum delors secorum) или:
div.something {
display: block; /* for verification */
min-height: 50px;
min-width: 50px;
}
Проверьте вкладку макета Firebug (на вкладке HTML), чтобы убедиться, что div имеет высоту / ширину.
У меня была аналогичная проблема с CSS-свойством background-image в FF. Он отлично работал в IE, но отказывался работать в FF;) Прочитав несколько сообщений, я установил, что проблема действительно заключалась в том, что в div не было содержимого, кроме таблицы (я пытался настроить фоновое изображение под размер браузера без сворачивания или расширения и поэтому использовал гораздо большее изображение на фоне div, чтобы сформировать своего рода `` обрезку ''.) Мне кажется, решение было просто `` обмануть '', поместив тег img, который отобразил пустой файл .png, который я затем скорректировал до правильной высоты изображения с шириной, установленной на 100%. Это сработало для моей проблемы, и я надеюсь, что это поможет всем, кто сталкивается с аналогичной проблемой. Наверное, не лучшее исправление, но это исправление;)
Единственное, о чем я могу думать помимо того, что уже было сказано, - это способ создания картины. Если вы сделали / редактировали изображение в Photoshop, убедитесь, что вы сохранили его как «Сохранить для Интернета» ...
Иногда, если вы используете изображение JPG для Photoshop без сохранения в виде веб-изображения, оно может не отображаться в Firefox. У меня такое случилось несколько недель назад, когда художник-график создал красивый заголовок для мини-сайта, и он НЕ появлялся в FF!
Ждать...
Попробуйте установить ширину и высоту div, чтобы расширить его. Это может быть проблема с отсутствием содержимого в вашем div.
Как ни странно, после того, как я часами бился головой о клавиатуру, я добавил display: table; к стилю DIV, и фоновое изображение волшебным образом появилось в FF.
Вместо использования 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, я использовал их здесь, потому что это выглядит красивее.
Удачи со мной. JPG отображается в IE, но не в Firefox или Chrome. Вот решение
Измените следующий CSS для элемента, в котором отображается изображение. Это может быть span, div или любой другой элемент:
display:block
Работал у меня в 2018 году. Однако я использовал элемент изображения, а не div.
Для тех, кто сталкивается с проблемой в FF, но не в Chrome:
Вы могли ошибочно смешивать разные типы значений для позиции.
Например,
background: transparent url("/my/image.png") right 60% no-repeat;
Сделаю эту ошибку. Исправление могло быть таким:
background: transparent url("/my/image.png") 100% 60% no-repeat;
Это сработало для меня:
1) Щелкните по таблице фоновых изображений.
2) Щелкните правой кнопкой мыши строку состояния внизу страницы.
3) Щелкните Встроенные стили.
4) Перейдите на вкладку "Стили фона".
5) Если в названии цвета вы видите «Прозрачный», это проблема.
6) Щелкните поле цвета и выберите цвет (белый - хороший выбор).
7) Цвет заголовка должен теперь читаться как белый.
8) Нажимаем ОК.
9) Сохраняем страницу.
10) Загрузите страницу и перезапишите существующий файл .
11) Обновите страницу, и отобразится фоновое изображение.
Примечание. Убедитесь, что вы загрузили фоновое изображение в формате jpeg. Я забыл загрузить фоновый jpeg один раз и потратил много времени, пытаясь отсортировать его, прежде чем осознал свою ошибку.
С Уважением
Мартин
Я решил аналогичную проблему, переименовав класс CSS. MSIE позволяет идентификаторам классов CSS начинаться с цифр; Firefox этого не делает. Я создал класс, используя ширину изображения в пикселях, например. .1594px-01a
Я действительно знал, что это нестандартный синтаксис, но, поскольку он отлично работал в MSIE, я забыл об этом. После того, как я попробовал все остальное, меня наконец осенило, что это может быть просто наименование, и как только я поставил перед классом букву, готово!
Я обнаружил две вещи, которые вызывали эту проблему:
- Я использовал файл .tif, который, похоже, не нравился Firefox - я изменил его на файл .png.
- Я добавил
overflow:auto;в CSS для div -display:block;у меня не работал.
Моя ошибка заключалась в использовании '\' вместо '/'. Работал нормально в IE, но не в других браузерах.
Похоже, проблема с прикреплением фона. Для работы в FF необходимо установить фиксированное значение (не прокручивать). См .: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-position
Для меня это был вопрос чувствительности имени файла к регистру. Я не уверен, был ли это CSS, или это была моя операционная система Ubuntu, или это был firefox, но я, наконец, получил фоновые изображения для отображения, обратившись к BlueGrad.jpg вместо bluegrad.jpg. Первый из двух - как он был спасен. Я не думал, что это будет чувствительно к регистру, но это было так.
Это может показаться очень странным, но у меня это работает>
#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
(Не похоже, что это точные обстоятельства с OP, но проблема несколько связана, и я нашел обходной путь для того, которым я хочу поделиться)
У меня была та же проблема - фоновое изображение видно везде, кроме Firefox, - и для меня проблема была связана с тем, что я работаю над надстройкой для браузера.
Я вставляю файл style.css в модуль pageMod с атрибутом contentStyleFile. В нем есть правило background-image: url(/img/editlist.png);, в котором я ссылаюсь на файл образа внешний для надстройки. Проблема здесь в том, что Firefox, в отличие от других браузеров, неверно интерпретирует этот внешний корень домена как внутренний корень надстройки!
Css-файл представляет собой порт 1: 1 из версии расширения / надстройки Chrome, поэтому я не хотел возиться с ним. Вот почему я добавил дополнительное правило contentStyle в сочетании с копией этого изображения в моей папке ресурсов. Это правило просто перезаписывает правило внутри css-файла.
(Оглядываясь назад, возможно, даже более элегантный метод, чем раньше ...)
Старый пост, но у меня просто была похожая проблема, изображения не отображались в Firefox, оказалось, что это надстройка рекламного блока, мне пришлось изменить имена моих изображений
Никто не упомянул фон-происхождение, так что готово:
background-image:url('dead.beef');
background-size: 100% 100%;
background-origin:border-box;
Решил проблему за меня; мой фон, по-видимому, был за пределами моего div.
У меня была аналогичная проблема. Причина в том, что Firefox чувствителен к отсутствующим полям в вашем CSS. Chrome (иногда) автоматически заполняет отсутствующее поле, поэтому проблема появляется в вашем браузере Firefox.
Вам нужно добавить тип отображения, потому что сейчас он переводится на нулевую высоту.
В моем случае:
.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;
}
У меня работает в FF3, Opera, IE и Chrome. Я обычно помещаю URL в кавычки.