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?
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:
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. 32×32 px).
A search for CSS Sprites will give you more information.