CSS Sprites Demo

Description:

An image sprite is multiple images combined into one master image. For this CSS Sprite Demo, we have combined 8 images for the buttons below (four default states and four rollover states), into a single image sprite. Click on the screenshot below to see the full-size sprite. Then using CSS background-image properties, we mapped out which horizontal and vertical portions of the image to display where needed.

Advantages of CSS Sprites:

to save bandwidth
to reduce HTTP server requests
and thus speed up page load times

CSS Sprite Screenshot:

Sprite Rollover Example:

Method:

This CSS Sprite Demo was built with the help of CSS Sprite Generator.

CSS Code

#nav li {
font-size:1.2em;
list-style-type:none;
}
#nav li a {
background-image:url(Images/CSSSprite.jpg);
background-repeat:no-repeat;
padding:45px 90px;
line-height:100px
}
#nav li a.item1 {
background-position: -45px -741px;
}
#nav li a.item1:hover {
background-position: -45px -45px;
}
#nav li a.item2 {
background-position: -45px -912px;
}
#nav li a.item2:hover {
background-position: -45px -216px;
}
#nav li a.item3 {
background-position: -45px -1083px;
}
#nav li a.item3:hover {
background-position: -45px -387px;
}
#nav li a.item4 {
background-position: -45px -1257px;
}
#nav li a.item4:hover {
background-position: -45px -561px;
}

HTML Code

Commentary: