Css Image Sprites

```html CSS Image Sprites | Novice Tutorial

Image Sprites

Image sprites are a collection of single images.

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

Using image sprites will reduce the number of server requests and save bandwidth.

Image Sprites - Simple Example

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

Navigation Images

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

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

Example

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Try it »

Example Explained:

<img class="home" src="img_trans.gif" /> - Because 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 portion 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 we will 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

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

Try it »

Example Explained:

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

Now start positioning and styling each specific part:

#home{left:0px;width:46px;} - Positioned 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 (width of #home 46px + some extra space between items), width is 43px.
#prev{background:url('img_navsprites.gif') -47px 0;} - Defines the background image 47px to the right (width of #home 46px + 1px divider line).
#next{left:129px;width:43px;} - Positioned 129px to the right (#prev 63px + #prev width is 43px + remaining space), width is 43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - Defines the background image 91px to the right (width of #home 46px + 1px divider line + width of #prev 43px + 1px divider line).

Image Sprites - Hover Effects

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

The :hover selector is used to show 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 for hover:

Navigation Images with Hover

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

We add the hover effect by adding only three lines of code:

Example

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

Try it »

Example Explained:

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 45px lower down for each.

```

YouTip