10 Great Tutorials About How to Create and Use CSS Sprites
If you don’t know what a CSS sprite is or how to use it, you really need to read this. Basically, using a sprite is a different way of displaying images on your site.
Instead of embedding lots of images in your web page, you put all the images into ONE image ‘sheet’ (imagine a GIF or JPG with a bunch of images all pasted onto it), or sprite, then you use CSS to show just the portion of the sprite sheet you want to show for each image instance on your site. You use the CSS background-position property to specify the X and Y coordinates for the rectangle within the sprite that you want to show.
Let’s say you want to use all these images on your site.
Instead of slicing them in Photoshop individually, you put ‘em all on one ’sprite sheet’ and then you reference a piece at a time, using the CSS background position
With the CSS background positioning property you pass the X and Y coordinates of the rectangular
area you want to show.
Here are 10 great tutorials on how to set up and use CSS Sprites: