Фоновое изображение не отображается в Firefox - PullRequest
Новая
       77

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

18 голосов
/ 16 декабря 2008

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

Пример CSS: 

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

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

Ответы [ 25 ]

0 голосов
/ 23 ноября 2009

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

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

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

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

0 голосов
/ 23 ноября 2009

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

0 голосов
/ 16 декабря 2008

Этот HTML-тег 'base' похож на 

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

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

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

0 голосов
/ 12 января 2019

У меня была похожая проблема. Причина в том, что 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;
}
0 голосов
/ 16 декабря 2008

Вы можете попробовать это: 

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

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...