CSS Image Sprite

CSS Image Sprite is a Single Image containing multilple images which is used in background.
It save loading times as we are using single image for multiple purpose.

For Example, I am using this single image to call multiple buttons.

This is the single image which we are using in background.

Now i am calling single image using image sprite.

        
To Call Single Image, we need to use this.

In HTML, create a button tag,                                         
In CSS , write,                                                          
     button{ background:url(image.ext) no-repeat -3px                  
                                                                   
 -67px;  border:none;  width:10px; height:10px}

We are calling complete image in background, and giving button specific
width and height. Now we are using background-repeat ( No-Repeat) and
background position( -3px is horizontal position and -67 px is vertical
position ).

This saves a lot of time to slide images and loading time as we are using single image everywhere.

This also optimize a website performance.

By  Avinash Malhotra
www.techaltum.com