Alex Rivera | Logout

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

Asked 2009-02-03T15:52:05.853
9

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?

html css css-sprites
Edit
Report

1 Answer

10

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.

answered 2009-02-03T15:57:01.333

Your Answer