How to make CSS sprites

What is CSS Sprites CSS sprites is an technique here you can combine all images which used in your

icon sprites

CSS Sprite Usage

CSS sprites reduce HTTP requests and the loading time of pages. This is the main reason to use css sprites for all heavy traffic websites. CSS sprites are used particularly for navigation (such as for hover effects), icons and buttons.

CSS Sprite Example

Here we show you example of CSS Sprite We combined all social bookmarking icons into a single image and going to use different icons in different locations., So This all social bookmarking icons retriving from the server in a single HTTP request (instead of 10 HTTP requests). This experience shows that reducing the number of HTTP requests has the biggest impact on reducing response time and is often the easiest performance improvement to make.

So how to do? How to create css sprite

This is to retrieve the image in a single request

.addthis_button_twitter,
.addthis_button_delicious,
.addthis_button_facebook,
.addthis_button_digg,
.addthis_button_stumbleupon,
.addthis_button_favorites,
.addthis_button_more,
.reltwitter,.relrss
{
width: 32px;
height: 32px;
background-image: url(../images/allicons.gif);
float:left;
opacity: 0.85;
margin:0 10px;
}

and this code is for the unique classes merely shift the background position with negative Y coordinates.

.addthis_button_twitter {background-position: 0px 0px;}
.addthis_button_stumbleupon{background-position: 0px -32px;}
.addthis_button_more {background-position: 0px -64px;}
.addthis_button_favorites {background-position: 0px -96px;}
.addthis_button_facebook {background-position: 0px -128px;}
.addthis_button_digg {background-position: 0px -160px;}
.addthis_button_delicious {background-position: 0px -192px;}
.reltwitter {background-position: 0px -256px;}
.relrss {background-position: 0px -224px;}

also i used the same image for hover effect, Last two images of twitter i swap while hover, css for that effect

.reltwitter:hover {background-position:0px -288px;}

<div class="addthis_button_facebook"></div>
<div class="addthis_button_twitter"></div>
<div class="addthis_button_digg"></div>
<div class="addthis_button_delicious"></div>
<div class="addthis_button_favorites"></div>

Output Images

so what happens when I implement css sprites to my website is :

Firebug Report screen-shot