CODEWITHSUNDEEP
htmlcss
Anna Lam
Anna Lam

Reputation: 807

Background image won't show

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:

but I'm still stumped.

This is what the sidebar looks like in Eclipse's Web Page Editor: A screenshot of the offending page

This is what it looks like in Mozilla Firefox: enter image description here

Any tips for getting the images to show properly?

Upvotes: 0

Views: 6922

Answers (2)

Diego
Diego

Reputation: 18349

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.

Upvotes: 1

aroth
aroth

Reputation: 54806

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?

Upvotes: 0

Related Questions