CSS Sprite - Use an image to different components

This article guides you CSS Sprite technique - Use an image to contain all the icon to add a small icon for each separate component.
Preparation: A png image (this standard when used for most web icon). Sample images can be downloaded below

You draft a code as follows:

<ul>
     <span <li> id="home"> </ span> Home </ li>
     <span <li> id="next"> </ span> Next </ li>
     <span <li> id="previous"> </ span> Previous </ li>
     <span <li> id="fullscreen"> </ span> Fullscreen </ li>
</ ul>

In that span tag will contain the image.
CSS

I set the width and height of span in icon size. The part outside this box will be hidden.

The list item with the id will be equivalent wallpaper position is shifted so that the icon to use it right now span the corresponding frame.

li {
     list-style-type: none;
}
li span {
     background: url ('icon.png') no-repeat;
     display: inline-block;
     height: 16px;
     width: 16px;
}

# home {
     background-position: 0-112px;
}

# next {
     background-position:-112px-192px;
}

# previous {
     background-position:-144px-192px;
}

# fullscreen {
     background-position:-32px-80px;
}

Discussion Forum : webmaster forum