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

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.