背景画像は表示されません

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のWebページエディタでうまく表示が、私は、Webブラウザで同じページを開くために行くとき、テキストのみが表示されます。 私には、いくつかの他の記事からの推薦を試してみた：

• 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のWebページエディタで次のようになります。

これは、それはMozillaのFirefoxで次のようになります。

適切に表示するための画像を取得するための任意のヒント？

Answer 1

イメージのURLに絶対パスを使用しています（/Images/tape_measure_unit.png）。ブラウザからhome.htmlファイルにアクセスすると、そのパスはドライブ文字：file:///C:/Images/tape_measure_unit.pngの絶対パスになります。私はあなたのイメージがそこに住んでいるとは思いませんか？

イメージへのパスをCSSファイル（またはHTMLファイルがない場合は）の相対位置に設定します。たとえば、次のようになります。

これをすべてWebサーバーに展開したら、絶対パスが意味をなさないことに注意してください。たとえば、Webサーバーにローカルのcodestitcheryフォルダに対応するルートパスがある場合、イメージパスが機能します。

Answer 2

あなたのコードは、私に動作するように表示されます。

http://jsfiddle.net/GzzWU/

あなたはブラウザがCSSのコンテンツであれば古いバージョンをキャッシュしていないことを確認していますか？このようなことをテスト/デバッグする際の共通の問題です。もしあなたがIEでテストをしているのであれば（ただし、ChromeとFirefoxはともに更新されたバージョンをダウンロードするのではなく、キャッシュされたスタイルシートを再利用することにかなり積極的です）。

もしそうでなければ、画像URLに問題があるかもしれません。ブラウザで直接http://<your server>/Images/tape_measure_unit.pngにアクセスし、画像が戻ってきたことを確認してみましたか？