CSS / HTML - Background image not working

Question

Not sure why, but my layout doesn't display the sign in buttons.

CSS:

.sign-in {
 position: absolute;
 left: 895px;
 top: 30px;
 width: 96px;
 height: 36px;
 background-image: url('button_sign-in.png');
}
.sign-in:hover {
 background-image: url('button_hover_sign-in.png');
}

HTML:

<a class="sign-in" href="#" title="Sign In"></a>

The box is there and is click able, just no images in it. The images defiantly exist and are in the same folder as the html file.

Any ideas? Thanks!

• Andrew: Is the image in the same folder as your css? You need the full path to the image.
• Tim: Could it be the dash in your filenames? (I doubt it, but worth a shot)
• Sachin: Just go to developer tool (by clicking F12). see the console for any error related to 404

Answer 1

The location of the HTML file is not relevant.

Paths in CSS are relative to the location of the CSS file, not the HTML file being displayed.

For example if your CSS file was in a subdirectory (e.g. /css) of the directory that holds the HTML file and images, you need to change your paths from url(your_image.png) to url(../your_image.png).

If you open the "Network" tab in Firefox or Chrome Developer Tools you can see a list of network requests, which will include the (presumably) 404'd GET requests for the images. You can check the path there and adjust accordingly.

• user2987337: Spot on! Thanks! The CSS was in a CSS folder. The thing that confused me, is it was working in dreamweaver but not in my browser. Thanks a lot!
• Loko: @Ennui Dont expect accepted answer. He asked a question yesterday. It got solved and he didnt accept. Anyway good answer +1
• Moob: @Ennui I up-voted your answer because it is a good answer but prompting the OP to accept is uncool ;)
• Ennui: @Moob I wouldn't have asked if he didn't specifically say my response solved his problem! I also tend to say that to newly registered users since they may not understand how things work around here :D
• user2987337: Ennui, I spent the day waiting for the answer yesterday. This is the first time I came back on here. I didn't see I had an answer. I will check now.