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,                                        <button>&nbsp;</button>
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