CSS sprites for image backgrounds and UI Images?

[random1]

Hey All,

 

I've tried to get my head around CSS image sprites but I just can't seem to get it working.

 

Do you have any tips or example files for this?

[haku]

There are about a million tutorials on the net.

 

But the concept is pretty simple. Take both your images and turn them into one image (side by side, or top and bottom). Make sure both images are exactly the same dimensions. Make the container exactly the same size as one of the images (which is now half the image). Set the normal state image as the background (it should be at the top left of your image, regardless of whether you combined images is top/bottom or left/right). On hover, change the background image position by a negative of the size of the image.

[bronzemonkey]

But the concept is pretty simple. Take both your images and turn them into one image (side by side, or top and bottom). Make sure both images are exactly the same dimensions.

 

That's a pretty limited use of sprites and it's definitely not necessary for the images to be the same dimensions.

 

Just look at how amazon.co.uk uses a large sprite for all the main UI images - http://g-ecx.images-amazon.com/images/G/02/gno/images/orangeBlue/navPackedSprites_v13._V219533094_.png

 

The key is simply to produce a single matrix of images that is then positioned as a background image where needed.

[haku]

The guy said himself that he can't wrap his head around it. I gave him a basic solution at a level he can grasp. Sure there are more complicated ways it can be used, but everything you said is a little overwhelming for someone who hasn't even got the basics down yet.

[TheFilmGod]

It's important to remember that a CSS sprite can't be used EVERYWHERE. A css sprite can only be used where there is a fixed width/height. Css 2.0 doesn't support background-crop. Css 3.0 fixes this though.