Image sprites not displaying

Question

Not sure what I'm doing wrong here, but I've tried following the example on the relevant w3schools page, but to no avail. So here's what I have so far:

I have four images on my index page, called index1.png, index2.png etc. I combined them into a single png, which is simply index.png. That's my sprite image. I also have a 1x1 transparent image, which is the placeholder for each image in the HTML. Here is the image code:

<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />

And the CSS:

img.index1 {
    width:258px;
    height:300px;
    background:url(Images/index.png) 0px 0px;
}

Testing the page out, I get nothing more than a resized transparent image. The image I want displayed does not show up.

EDIT: Solved. I was an idiot and forgot to go up one directory in my CSS, since my CSS was in a folder on the root. The proper path was "../Images"

Answer 1

Are you sure the path to your images folder is correct? Make sure your path for your sprite is relative to your CSS file, not from where the CSS file is being linked from.

If you had a folder structure like this:

/index.html
/css/style.css
/images/sprite.png
/folder1/index.html
/folder2/subfolder2/index.html

The correct path to use in your CSS file would be this: ../images/sprite.png.

The path would be the same in your CSS file regardless of which index.html file that you would be including it from in the example above.

Answer 2

First and foremost, seeing as though you're using a sprite <img> isn't the correct tag. A div will suffice here. You also don't need to target HTML in your CSS as you've set a class. Try...

<div class="index1"></div>

Also your image url is missing quotation marks.

.index1 { 
    background-image:url('Images/index.png'); 
    background-position: 0 0; 
    height:300px; 
    width:258px; 
 }