HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Image Sprites

❮ Previous Next ❯

Image Sprites

An image sprite is like a group of pictures combined into one single picture.

A webpage containing lots of pictures may require a considerable amount of time to appear on your screen and asks the server for many things.

Using image sprites helps decrease how often your website talks to the server and saves internet data.

Image Sprites - Simple Example

Instead of using three different pictures, we use only one picture called "img_navsprites.gif."

With CSS, we can display only a specific portion of an image.

In this example, the CSS code tells us which part of the "img_navsprites.gif" image should be displayed.

Example

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}
Try it Yourself »

Example explained:

  • <img id="home" src="img_trans.gif"> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
  • width: 46px; height: 44px; - Defines the portion of the image we want to use
  • background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)

We'll make image sprites even better by adding links and cool hover effects to them. This is a straightforward method to do it.

Image Sprites - Create a Navigation List

We'd like to use a single image called 'img_navsprites.gif' to make a list for navigation.

We'll utilize an HTML list for two reasons: it can function as a link and can also display a background image.

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 explained:

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

Now start to position and style for each specific part:

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

We want to make our navigation list more interesting when you hover over it.

Tip: The :hover selector can be used on all elements, not only on links.

Our fresh image, named 'img_navsprites_hover.gif,' has three navigation pictures and three additional images for hover effects.

Since this is just one picture, not six different ones, there won't be any waiting time when someone hovers their mouse over it..

To create the hover effect, you only need to insert 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 Yourself »

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
❮ Previous Next ❯