CSS Image Sprite Technique

Image Sprites

Image sprites are collections of individual images.

A webpage with many images may take a long time to load and generate multiple server requests.

Using image sprites reduces the number of server requests and saves bandwidth.

Image Stitching - Simple Example

Instead of using three separate images, let's use this single image ("img_navsprites.gif"):

With CSS, we can display only the part of the image we need.

In the following example, the CSS specifies displaying a part of the "img_navsprites.gif" image:

Example Analysis:

• <img class="home" src="img_trans.gif.html" /> - since it cannot be empty, the src attribute only defines a small transparent image. The displayed image will be the background image we specified in CSS.
• Width: 46px; Height: 44px; - defines the part of the image we use.
• background:url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)

This is the simplest way to use image sprites. Now let's use links and hover effects.

Image Sprites - Creating a Navigation List

We want to use the sprite image ("img_navsprites.gif") to create a navigation list.

We will use an HTML list, because it can be linked and also supports background images:

Example Analysis:

• #navlist{position:relative;} - Position is set to relative, to allow the absolute positioning inside.
• #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin and padding set to 0, list style removed, all list items are absolutely positioned
• #navlist li, #navlist a{height:44px;display:block;} - The height of all images is 44px

Now let's start positioning and styling each specific part:

• #home{left:0px;width:46px;} - The way to position to the far left, and the image width is 46px.
• #home{background:url(img_navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
• #prev{left:63px;width:43px;} - Positioned 63px to the right (46px width of #home + some extra space between items), width is 43px.
• #prev{background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (#home width 46px + 1px separator)
• #next{left:129px;width:43px;}- Positioned to the right at 129px (#prev 63px + #prev width 43px + remaining space), width is 43px.
• #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Defines the background image 91px to the right (#home 46px + 1px divider + #prev width 43px + 1px divider).

Image sprites - Hover effects

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

	The :hover selector is used to display the effect when the mouse hovers over an element. Tip:The :hover selector can be applied to all elements.

Our new image ("img_navsprites_hover.gif") contains three navigation images and three images:

Because this is a single image, rather than 6 separate image files, there will be no loading delay when the user hovers over the image.

To add the hover effect, we only need to add three lines of code:

Example Analysis:

• Since the list item contains a link, we can use the :hover pseudo-class.
• #home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - For all three hover images, we specify the same background position, just each one moved down another 45px.