CSS `Image Sprites`

Image Sprites

Image sprites are collections of images in a single file.

Web pages with many images can take a long time to load and generate multiple server requests.

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

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

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

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

Example Explanation:

<img class="home" src="img_trans.gif" /> - The src attribute defines a small transparent image since it cannot be empty. The displayed image will be the background image specified in our CSS.
width: 46px; height: 44px; - Defines the portion of the image we are using.
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.

We want to use the sprites 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 Explanation:

#navlist {position: relative;} - Sets relative positioning to allow absolute positioning inside.
#navlist li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - Sets margin and padding to 0, removes list style, and positions all list items absolutely.
#navlist li, #navlist a {height: 44px; display: block;} - All images have a height of 44px.

Now, let's position and style each specific part:

#home {left: 0px; width: 46px;} - Positions 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;} - Positions 63px to the right (#home width 46px + some extra space), 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;} - Positions 129px to the right (#prev 63px + #prev width 43px + extra 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 separator + #prev width 43px + 1px separator).

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

| | :hover selector is used for displaying effects when hovering over elements. Tip: The :hover selector can be used on all elements. | | --- | --- |

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

Since this is a single image instead of 6 separate image files, there will be no delay in loading when users hover over the images.

We add the hover effect with just three lines of code:

Example Explanation:

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