CSS Image Sprites
Image Sprites
A group of photos combined into one image is called an image sprite.
A website with a lot of graphics may take a while to load and may send out several server requests.
By using picture sprites, bandwidth can be conserved and fewer server calls will be made.
Image Sprites - Simple Example
Rather than utilizing three distinct images, we employ this one (“img_navsprites.gif”):
We can display only the necessary portion of the image using CSS.
The CSS in the example below indicates where area of the “img_navsprites.gif” picture should be displayed:
Example
#home {
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
}
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)
Now that we know how to use image sprites the simplest way possible, let’s expand it with links and hover effects.
Image Sprites - Create a Navigation List
To make a navigation list, we wish to use the sprite image (“img_navsprites.gif”).
We’ll utilize an HTML list since it allows for background images and can act as a link:
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;
}
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 now wish to give our navigation list a hover effect.
Note: Not limited to links, the :hover selector can be applied to any element.
Three images for navigation and three images to use for hover effects are included in our new image (“img_navsprites_hover.gif”):
When a user hovers over an image, there won’t be any loading time because there is just one image, not six different files.
To add the hover effect, we simply need to add 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;
}
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
