Изображение существует, но не отображается в качестве фона

Question

У меня есть это в моем файле CSS:

body {style.css (line 3)
background:#CDF8FF url(images/final_bg.jpg) no-repeat scroll center top;
clear:both;
font-family:Arial,Helvetica,sans-serif;
margin:0;
padding:0;
}

Эти изображения существуют, поскольку я могу получить их через браузер, но они никогда не отображаются мне! Что не так?

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

Спасибо всем, кто сможет устранить эту путаницу.

Кстати, я несколько раз очищал свой кеш! Я использую Firefox на своей коробке Fedora Linux.

Answer 1

Вероятно, что указанное изображение на самом деле не существует.

Распространенной ошибкой является размещение HTML-документа по адресу:

http://example.com/foo.html

с таблицей стилей на

http://example.com/css/style.css

ссылка на изображение в

http://example.com/css/images/final_bg.jpg

но на самом деле изображение помещается в

http://example.com/images/final_bg.jpg

URL в таблицах стилей относятся к таблице стилей, а не к документам, которые ссылаются на эту таблицу стилей.

Переместите изображение или измените URL (чтобы начать с / в приведенном выше примере)

Answer 2

Если вы используете относительные URI в своей таблице стилей, вам нужно сделать их относительно URI таблицы стилей.

Так что, если ваша таблица стилей находится в /css/style.css, вам нужно использовать ../images/final_bg.jpg для правильной ссылки /images/final_bg.jpg (или вы используете абсолютный путь URI /images/final_bg.jpg).

Answer 3

Это относительный URL. Должно ли это быть /images/final_bg.jpg?

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

Также в Firebug посмотрите сетевой трафик - видите ли вы ожидаемый запрос и успешный ответ (200)

Редактировать: исправлено на основе комментария Дэвида

Answer 4

вам нужно поставить путь внутри кавычек:

background:#CDF8FF url('images/final_bg.jpg') no-repeat scroll center top;

Answer 5

Ставлю на .. / images / final_bg.jpg :

background:#CDF8FF url(../images/final_bg.jpg) no-repeat scroll center top;

Answer 6

попробуйте использовать абсолютный путь, особенно если ваш CSS находится во внешней таблице стилей.

url(/images/final_bg.jpg)

Если это не сработает, попробуйте добавить кавычки

url('images/final_bg.jpg')

Надеюсь, это поможет!