How do CSS sprites work?

Question

I have 3 different images and you want to create a sprite using CSS. I understand that this will reduce HTTP requests. However, I am completely new to this concept and have no idea how to approach this.

Which is better for me? I also saw that there are some CSS sprite generators where you send .zip images and combine them.

I tried to do this, but did not understand what was going on. Any guidance on creating and using CSS sprites would be greatly appreciated.

Update: . I looked through the article A List Part, but I was not very clear. Can someone give an example of using CSS sprite? [A short, self-sufficient example in the answer is preferable to SO than just a link to an example elsewhere. - ed.]

Answer 1

An example you need to learn is as follows:

#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Sprite.gif is a large image containing all the smaller images in the grid (optional). Then you use positioning to display only that part of the sprite that contains your image.

There are online tools that specify a set of images, return a large image of a sprite with coordinates where to look for smaller images.

Answer 2

CSS Sprites: What It Is, Why Theyre Cool, and How to Use Them

Answer 3

A List Apart : CSS Sprites: Slicings Kiss of Death

Answer 4

, , . , . css background-position, , .

Answer 5

Google , iGoogle. . . , .

, , .

Answer 6

, , , . , . , , , , , . CSS .

, "" . CSS , .