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

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; 
} 

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

• Background Image won't show up in CSS unless I load an image using the <img> tag in HTML
• Background images not appearing
• Background image wont show up

, но я все еще озадачен.

Это то, что боковая панель выглядит как в веб-страницы редактора в 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 и убедиться, что изображение возвращается?