CSS Image Sprites

CSS Image Sprites

An image sprite is a collection of various small images put into one larger image file, called a "sprite image".

A sprite image is typically arranged in a grid-like way, like this:

A web page with multiple images takes a longer time to load, and generates multiple server requests.

So, instead of downloading each image separately, the browser downloads the single sprite image file, which will reduce the number of server requests and reduce bandwidth usage.

CSS Image Sprites Example

The CSS key properties used for image sprites are:

• background-image
• background-position

Here, the CSS code specifies which part of the sprite image ("img_navsprites.gif") to show for the different navigation items (home, next, and previous):

Example explained:

• width, height - Defines the width and height of each image-parts
• background-image: url(img_navsprites.gif); - Defines the url of the image sprite
• background-position - Shifts the background image within each element, to display only the desired portion of the sprite image
• <img id="home" src="img_trans.gif"> - Each image just start with a small transparent image because the src attribute cannot be empty (the displayed image will be the background image we specify in CSS)

Image Sprites in a Navigation List

Here, we use the sprite image ("img_navsprites.gif") inside a navigation list. We will use an HTML list (<ul> and <li>) for the navigation list:

Example explained:

• #navlist {position:relative;} - position is set to relative to allow absolute positioning inside it
• #navlist li - set margin and padding to 0, remove bullets, and all <li> are absolute positioned
• #navlist li, #navlist a - set the height of all images to 44px and display as block

Now position and style each navigation item:

• #home {left:0px;width:46px;} - Positioned all the way to the left, and the width of the image is 46px
• #home {background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
• #prev {left:60px;} - Positioned 60px to the right (#home width 46px + some extra space between items)
• #prev {background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px line divider)
• #next {left:120px;} - Positioned 120px to the right (start of #prev is 60px + #prev width 43px + extra space)
• #next {background:url('img_navsprites.gif') -91px 0;} - Defines the background image 91px to the right (#home width 46px + 1px line divider + #prev width 43px + 1px line divider)

Image Sprites - Hover Effect

Now we want to add a hover effect to our navigation list.

Our new image ("img_navsprites_hover.gif") contains three navigation images and three images to use for hover effects:

Because this is one single image, and not six separate files, there will be no loading delay when a user hovers over the image.

We only add three lines of code to add the hover effect:

Example explained:

• #home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - For all three hover images we specify the same background position, only 45px further down