Фоновое изображение не будет отображаться

Question

Ниже приведен код HTML и CSS для моей боковой панели.

<div id="sidebar">
    <header>
    <h3 class="site-title">The Code Stitchery</h3>
</header>
<nav>
    <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
    </ul>
    </nav>
</div>

CSS

nav a {
    background: url(/Images/tape_measure_unit.png) no-repeat;
    display: block;
    padding: 2px 4px;
    text-align: center;
    width: 256px;
    height: 36px;
}

Фоновые изображения хорошо отображаются в редакторе веб-страниц Eclipse, но когда я идучтобы открыть ту же страницу в веб-браузере, отображается только текст.Я попробовал рекомендации из других постов, в том числе:

• Фоновое изображение не будет отображаться в CSS, если я не загружу изображение, используя тег в HTML
• Фоновые изображения не отображаются
• Фоновое изображение не будет отображаться

, но я все еще в замешательстве.

Вот так выглядит боковая панель в редакторе веб-страниц Eclipse:

Вот как она выглядит в Mozilla Firefox:

Любые советы по получениюизображения, чтобы показать правильно?

Answer 1

Вы используете абсолютный путь в URL вашего изображения (/Images/tape_measure_unit.png), когда вы обращаетесь к файлу home.html из браузера, этот путь становится абсолютным для буквы диска: file:///C:/Images/tape_measure_unit.png.Я не думаю, что ваше изображение там живет, не так ли?

Сделайте путь к вашему изображению относительно местоположения вашего CSS-файла (или HTML-файла, если у вас его нет).Например:

     background: url(../Images/tape_measure_unit.png) no-repeat; 
                     /**NOTE THE PERIOD BEFORE THE SLASH.**/

Обратите внимание, что после развертывания всего этого на веб-сервере может иметь смысл абсолютный путь.Например, если ваш веб-сервер имеет корневой путь, соответствующий вашей локальной папке codestitchery, тогда ваш путь к изображению будет работать.

Answer 2

Мне кажется, ваш код работает:

http://jsfiddle.net/GzzWU/

Вы уверены, что браузер не кэширует старую версию вашего CSS контента? Это общая проблема при тестировании / отладке такого рода вещей. Вдвойне, если вам случается проводить тестирование в IE (хотя Chrome и Firefox довольно агрессивны в отношении повторного использования кэшированной таблицы стилей вместо загрузки обновленной версии).

Если это не так, возможно, это проблема URL вашего изображения. Вы пытались навести браузер прямо на http://<your server>/Images/tape_measure_unit.png и убедиться, что изображение возвращается?