2010-07-24 2 views
0

Я не могу понять, почему мои фоновые изображения в моих абсолютно позиционированных divs не отображаются. Я использую firefox, но также и в Chrome.Почему фоновое изображение в моем абсолютно позиционированном div не отображается?

Отличительной особенностью является то, что при просмотре страницы при открытии диалогового окна «Редактировать CSS-панель инструментов веб-разработчика» отображаются изображения.

Образцы, о которых идет речь, являются div с идентификатором «joel-image» и навигационными элементами.

http://joelglovier.com

ответ

5

Пути в CSS по сравнению с фактической CSS файл .. а не HTML страницы ..

так что ваш путь должен быть либо ../img/joel-image.jpg или лучше /img/joel-image.jpg

В настоящее время файл CSS находится в папке /css, поэтому свойство фонового изображения url(img/joel-image.jpg) переводит на /css/img/joel-image.jpg, что является неправильным.

+1

+1. Я подозреваю, что причина, по которой они отображаются в вашем инспекторе CSS, заключается в том, что она использует пути относительно веб-страницы, а не файл CSS. – iblamefish

+0

Это так! +1. – jolt

+1

+1 Кроме того, вместо того, чтобы использовать панель инструментов веб-разработчика для проверки такого рода вещей, вместо этого вы можете использовать Firebug для Firefox, что даст вам более точное представление о том, что на самом деле происходит на отображаемой странице. WDT хорош для проверки того, что активы существуют, среди многих других, но Firebug часто лучше идентифицирует причины проблем с отображением страниц. Используйте оба расширения в тандеме, они отлично сочетаются. – hollsk

1

Запрос, который браузер делает на изображение, возвращает 404. Таким образом, путь к вашему изображению неверен. Двойная проверка. Попробуйте абсолютный путь.

Смежные вопросы