CSS Spriting is a technique used to limit the number of HTTP requests generated by a web page. This is done by combining multiple images into one image and using the CSS background-position property.

An Example - Three Plain Links

Let's imagine that you have some links on your page:

Three Links, With Style

Your links look great, but you decide spice it up a little bit with some images. You find three icons. Here they are:

Using CSS and the images, you set the background and put a little bit of padding on the left to add some space before the text starts. Your links now look like this:

Looks perfect! Only one problem. There are three images. For each image, a web browser needs to open an HTTP connection to download the image. Some browsers can only have 2 connections open at once, so this could slow your page down quite a bit.

Three Links, With CSS Sprites

You can combine all these images using a CSS sprite generator. Done? OK, now we have a nice combined image:

We can't just set the background image on all of them to icon.png. It would look like this:

That doesn't look quite right... See that setting the background image to "top left" causes each link to display the top image in our sprite (in this case, the delete image). This is the extra work we need to do for sprites. We need to use the offsets to position the background image properly:

More resources

Here are some popular CSS Sprite articles with more explanations, examples, and links:

• A List Apart
• Smashing Magazine
• Yahoo Developer Network
• Google Page Speed