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