Background image won't show - html

Question

Below is the HTML and CSS code for my sidebar.
<div id="sidebar">
<header>
<h3 class="site-title">The Code Stitchery</h3>
</header>
<nav>
<ul>
<li>Portfolio</li>
<li>Blog</li>
<li>Downloads</li>
<li>About</li>
<li>Contact</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;
}
The background images show up just fine in Eclipse's Web Page Editor, but when I go to open the same page in a web browser, only the text is showing.
I've tried the recommendations from some other posts, including:
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
but I'm still stumped.
This is what the sidebar looks like in Eclipse's Web Page Editor:
This is what it looks like in Mozilla Firefox:
Any tips for getting the images to show properly?

Answer 1

You are using an absolute path in the URL of you image (/Images/tape_measure_unit.png), when you access your home.html file from a browser, that path becomes absolute to the drive letter: file:///C:/Images/tape_measure_unit.png. I don't think your image lives there, does it?
Make the path to your image relative to the location of your CSS file (or HTML file if you don't have one). For example:
background: url(../Images/tape_measure_unit.png) no-repeat;
/**NOTE THE PERIOD BEFORE THE SLASH.**/
Note that, once you have all this deployed to a web server, an absolute path may make sense. For example, if your web server has a root path that corresponds to your local codestitchery folder, then your image path will work.

Answer 2

Your code appears to work to me:
http://jsfiddle.net/GzzWU/
Are you sure that the browser is not caching an old version if your CSS content? That's a common issue when testing/debugging this sort of thing. Doubly so if you happen to be testing in IE (though Chrome and Firefox are both pretty aggressive about reusing a cached stylesheet instead of downloading the updated version, as well).
If it's not that then perhaps it's an issue with your image URL. Have you tried pointing a browser directly at http://<your server>/Images/tape_measure_unit.png and making sure that the image comes back?