Single image file to store all the little images on a page

Question

In one of the recent Stackoverflow podcasts, Jeff talked about having a single image file having all of those tiny images that are all over a page and then cutting it with CSS so that all the images get displayed correctly. The whole point is to reduce the number of server requests so that the page gets loaded faster. I was like "wow, that's really cool, I could really use this in our product".

My question is: How is this done with CSS? I need to load the images with background-image, but then how do I specify the offset of the sub-image in the large image? That is, suppose that there is a hammer icon in the large image at (50px, 50px) and it has a size of 32px * 32px, how can I force the browser to only display that bit?

Answer 1

It's called css sprites.

I's basically an old trick used in games programming where you load a single bitmap containing all the "states" of some item you need to draw, the advantage is that this way the image get's preloaded and there's no delay when you need to actually use it, in the case of css, it's normally implemented by using the image as background to the element, and applying different offsets and bounds on :hover, :active and "normal" classes.

There's more info in the stackoverflow Blog

Here's a nice generator: http://www.csssprites.com/

Answer 2

Basically you use your single image as the background image, but move it off (to the left and up) by the offset of the image you want to display. E.g. to display the hammer icon:

.hammer
{
  background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}

But as far as I know, you have to make sure that the element that's using the background image has the correct size (e.g. 32x32 px).

A search for CSS Sprites will give you more information.

Answer 3

You know the answer ... ask google in this case look at the source of the google search results page, with a tool like firebug and you will find

.w10 
 background-position:-152px 0;
}
.w10, .w11, .w20, .w21, .w24, .wci, .wpb 
 background:transparent url(/images/nav_logo4.png) no-repeat scroll 0 0;
 border:0 none;
 cursor:pointer;
 height:16px;
 margin-left:8px;
 vertical-align:bottom;
 width:16px;
}

So all w10, w11, w20 etc share the same image (nav_logo4.png) all have fixed hight and width. and all specify (different) backgroup-position's.