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!

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

Ennui · Accepted Answer · 2013-11-14 14:11:43Z

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.

answered Nov 14, 2013 at 14:11

Ennui

10.2k3 gold badges37 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2987337 Over a year ago

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 Over a year ago

@Ennui Dont expect accepted answer. He asked a question yesterday. It got solved and he didnt accept. Anyway good answer +1

Moob Over a year ago

@Ennui I up-voted your answer because it is a good answer but prompting the OP to accept is uncool ;)

Ennui Over a year ago

@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 Over a year ago

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.

|

Collectives™ on Stack Overflow

CSS / HTML - Background image not working

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related