HTML and CSS Reference
In-Depth Information
Figure 8-15.
A CSS sprite combines multiple background images in a single file
In sprites.html, each icon is displayed as the background image in padding added to the left or right of the
text. That's why the icons are stacked vertically. If they were arranged horizontally, neighboring icons would
appear behind the text. The first three icons are designed to be added as background images to the left of text, so
they're aligned to the left of the sprite. The last two are designed to go on the right of text, so they're aligned right.
Figure
8-16
shows the icons in use. Each one is displayed independently, even though it's part of the larger
image.
Figure 8-16.
Only the part of the sprite that fits into each element's background is displayed
The styles in sprites.html look like this:
.icons {
background-image: url(images/icons.png);
background-repeat: no-repeat;
}
.rss {
padding-left: 30px;
}
.phone {
