I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.
What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.
I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.
Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]
The example you need to study is the following:
#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 big image containing all the smaller images in a grid (doesn't have to be). You then use positioning to display just that part of the sprite that contains your image.
There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.