CODEWITHSUNDEEP
htmlcss
user2987337
user2987337

Reputation: 333

CSS / HTML - Background image not working

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!

Upvotes: 0

Views: 88

Answers (1)

Ennui
Ennui

Reputation: 10190

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.

Upvotes: 1

Related Questions