CSS Beginners Guide part 11 - Working with CSS Sprites

CSS sprites are very great feature and save lot of time, an image with collection of  images put into a one image, sprites reduce the image loading time, generally instead of using separate images, we use single image, we keep unlimited images in one big image and manage with background-position property, we give X and Y positions as a values.

i will give you one best example, we put social icons in our website to people like us, as the common way we take individual images for them but using CSS Sprites no need to use this process, just put all images into one file separating by at-least one pixel gap between images
ex:

<style>

#fb_icon{

background-image:url('socialicons.png');

background-position:0 0; 

}

// calling next image from same file

#twitter_icon{

background-image:url('socialicons.png');

background-position:50px 0; // the image starts from 50x pixels of x positon

}

</style>

HTML Code

<div>
<li id='fb_icon'></li>
<li id='twitter_cion'></li>
</div>