CSS Image Sprites
Loading many images makes a web page slower and causes multiple server requests.
An image sprite avoids this by packing various small images into a single larger file, the "sprite image", usually arranged like a grid.
The browser then fetches that one file rather than each image separately, so there are fewer server requests and less bandwidth is used.
CSS Image Sprites Example
Two CSS properties are central to image sprites:
background-imagebackground-position
In the example, CSS picks out which piece of the file ("img_navsprites.gif") appears for each of the navigation items (home, next, and previous).
Image sprites example
Example explained:
width,height- Size of each image partbackground-image: url(img_navsprites.gif);- Points to the image spritebackground-position- Moves the background image inside each element so that only the wanted portion of the sprite shows<img id="home" src="img_trans.gif">- An empty src attribute is not allowed, so each image begins with a small transparent file; what you actually see is the background image set in CSS
Prompt
Create an HTML page that demonstrates CSS image sprites.
Show how to use a sprite image ("img_navsprites.gif") to display three navigation icons (home, previous, next) by using the CSS properties background-image and background-position.
Each element should use a transparent image as the src and display the correct portion of the sprite via CSS:
- #home: width 46px, height 44px, background-position 0 0
- #prev: width 43px, height 44px, background-position -47px 0
- #next: width 43px, height 44px, background-position -91px 0
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Sprites Example</title>
<style>
#home {
width: 46px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: 0 0;
}
#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -47px 0;
}
#next {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -91px 0;
}
</style>
</head>
<body>
<h2>Image Sprites</h2>
<p>An image sprite is a collection of images put into a single image.</p>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="prev" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>
Image Sprites in a Navigation List
The sprite image ("img_navsprites.gif") can also drive a navigation list, and the markup for that is built as an HTML list (<ul> and <li>).
Navigation list with sprites
Example explained:
#navlist {position:relative;}- relative position here makes absolute positioning possible inside#navlist li- zero margin and padding, no bullets, and absolute positioning for every<li>#navlist li, #navlist a- block display and a height of 44px for all images
Each navigation item then gets its own position and style:
#home {left:0px;width:46px;}- Sits at the far left, with an image width of 46px#home {background:url(img_navsprites.gif) 0 0;}- Sets the background image together with the place it sits (left 0px, top 0px)#prev {left:60px;}- Sits 60px from the left (46px #home width + a little extra room between the items)#prev {background:url('img_navsprites.gif') -47px 0;}- Takes the background image from 47px to the right (46px #home width + 1px line divider)#next {left:120px;}- Sits 120px from the left (60px start of #prev + 43px #prev width + extra space)#next {background:url('img_navsprites.gif') -91px 0;}- Takes the background image from 91px to the right (46px #home width + 1px line divider + 43px #prev width + 1px line divider)
Prompt
Create an HTML page that demonstrates using CSS image sprites inside a navigation list.
Use the sprite image ("img_navsprites.gif") within an HTML unordered list (ul and li) to create a horizontal navigation bar. Each list item should be absolutely positioned and display a different part of the sprite image as its background.
The navigation list (#navlist) should use relative positioning. Each li should be absolutely positioned with no margin, padding, or bullets. The links and list items should have a height of 44px and display as block elements.
Position each item:
- #home: left 0px, width 46px, background position 0 0
- #prev: left 60px, width 43px, background position -47px 0
- #next: left 120px, width 43px, background position -91px 0
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites - Navigation List</title>
<style>
#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: 60px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 120px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
</style>
</head>
<body>
<h2>Image Sprites - Navigation List</h2>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>
Image Sprites - Hover Effect
Next, the navigation list gets a hover effect.
A new image ("img_navsprites_hover.gif") holds three navigation images plus three more for hovering.
All six live in one single image rather than separate files, so hovering causes no loading delay.
Three lines of code are all the effect takes.
Hover effect with sprites
Example explained:
#home a:hover {background: url('img_navsprites_hover.gif') 0 -45px;} - Each of the three hover images reuses its normal background position, just 45px lower.
Prompt
Create an HTML page that demonstrates CSS image sprites with a hover effect.
Build on the navigation list example using the sprite image ("img_navsprites_hover.gif") which contains three navigation images and three hover effect images arranged vertically. The hover images are located 45px below the normal images in the sprite.
Create a navigation list with home, previous, and next links. Add hover effects that shift the background position down by 45px when hovering:
- #home a:hover: background position 0 -45px
- #prev a:hover: background position -47px -45px
- #next a:hover: background position -91px -45px
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Sprites - Hover Effect</title>
<style>
#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_hover.gif') 0 0;
}
#prev {
left: 60px;
width: 43px;
background: url('img_navsprites_hover.gif') -47px 0;
}
#next {
left: 120px;
width: 43px;
background: url('img_navsprites_hover.gif') -91px 0;
}
#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;
}
</style>
</head>
<body>
<h2>Image Sprites - Hover Effect</h2>
<ul id="navlist">
<li id="home"><a href="default.asp"></a></li>
<li id="prev"><a href="css_intro.asp"></a></li>
<li id="next"><a href="css_syntax.asp"></a></li>
</ul>
</body>
</html>