How to Create CSS Sprite Menu

I am gonna show you how to create css sprite image and use it with css.




Download | Demo

An image sprite is a single image which includes many images.

If web page has many images, it can a long time to load and generates multiple server requests.

Using image sprite provides reducing the number of server requests and saving bandwidth

This is our Html menu

[html]
<ul id="navlist">
<li id="home"><a href="http://www.jotform.com/"></a></li>
<li id="prev"><a href="http://www.jotform.com/"></a></li>
<li id="next"><a href="http://www.jotform.com/"></a></li>
</ul>
[/html]

and This is the part which css sprite image is not used

[css]
#home{
background:url(‘images/home.jpg’) no-repeat;
}
#prev{
background:url("images/prev.jpg") no-repeat;
}
#next{
background:url(‘images/next.jpg’) no-repeat;
}
[/css]

You can go to http://spritepad.wearekiss.com/ and create your css image sprite with css.

There is no need to change any html code. You can use the css sprite image easily only changing the background-position:

This is sprite css

[css]
#home{
background:url(‘images/sprite.png’) no-repeat;
background-position: -86px 0;
}
#prev{
background:url(‘images/sprite.png’) no-repeat;
background-position: 0 0;
}
#next{
background:url(‘images/sprite.png’) no-repeat;
background-position: -43px 0;
}
[/css]