CSS Image Sprites

Image Sprite

Image sprites are a collection of images contained within a single image.

Web pages that contain 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 Sprite - Simple Example

We use the following single image ("navsprites.gif") instead of using three separate images:

Navigation Image

By using CSS, we can only display a certain part of the required image.

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

Example

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

Try It Yourself

Example Explanation:

  • <img id="home" src="trans.gif"> - Only define a small transparent image because the src attribute cannot be empty. The actual image displayed will be the background image specified in the CSS.
  • width: 46px; height: 44px; - Define the part of the image we want to use
  • background: url(navsprites.gif) 0 0; - Define the background image and its position (left 0px, top 0px)

Image Sprite - Create a Navigation List

We hope to use the sprite image ("navsprites.gif") to create a navigation list.

We will use an HTML list because it can be a link 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;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Try It Yourself

Example Explanation:

  • #navlist {position:relative;} - Set the position to relative to allow absolute positioning within it
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Sets margin and padding to 0, removes list-style, and all list items are absolutely positioned
  • #navlist li, #navlist a {height:44px;display:block;} - All images have a height of 44px

Now we start setting positioning and styles for each specific part:

  • #home {left:0px;width:46px;} - Positions it all the way to the left, image width 46px
  • #home {background:url(navsprites.gif) 0 0;} - Defines the background image and its position (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Positions it to the right by 63px (#home width 46px + some extra space between items), width 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Defines the background image to the right by 47px (#home width 46px + 1px separator)
  • #next {left:129px;width:43px;} - Positions it to the right by 129px (#prev starts at 63px + #prev width is 43px + some extra space), width 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Defines the background image to the right by 91px (#home width 46px + 1px separator + #prev width 43px + 1px separator)

Image Sprite - Hover Effect

Now, we will add a hover effect to the navigation list.

Tip::hover selector can be used for all elements, not just links.

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

Navigation Image

Because this is an image, not six separate files, so when the user hovers over the image,There will be no loading delay.

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

Example

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

Try It Yourself

Example Explanation:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - We specify the same background position for all three hover images, just 45 pixels down