CSS Sprites

CSS Sprites

CSS (Cascade Style Sheet) is used for give more precise alignment and look & feel in HTML page. its very useful one for web designers. Below you can see one image its screen shot  of my own project SAET AIO(System Administrator's Essential Tool). I used CSS Sprites in this tool. Here you can see many separate icons and header background. But these all are only one picture. you can see in next picture. Thats is original picture i used CSS sprites to split into many icons. Here i will tell how i did that. Below you can see the code.

Download Link for SAET : http://www.torrentreactor.net/torrents/5914187/SAET-AIO 

Here is the CSS Sprite code :

You create HTML tag in this same id in HTML code.

Now i created ID for HTML tag. i set background image as "SAET_sprite.jpg". 

background-position: top left;

In Above image 7zip icon in 4th place from left. i want to cut that.

set top position is to cut from top, here i set -203px and left position is to from left, here i set -150px.

#util_img1
{
width:55px;
height:53px;
background-image:url('SAET_sprite.jpg');
background-position:-203px -150px;
margin:120px 20px 20px 30px;
background-repeat:no-repeat;
}

Now you picture will be like this. 

 

Then you set width and height. you got perfect image.