Adding Backgrounds - Beginning CSS3 - page 164

padding-left: 25px;
background-position: left -40px;
}
a[href^='mailto:'] {
padding-left: 30px;
background-position: left -80px;
}
a[href$='.pdf'] {
padding-right: 24px;
background-position: right -120px;
}
a[href^="http://"] {
padding-right: 25px;
background-position: right -160px;
}

he icons class specifies the background image and prevents it from repeating. The class is applied to each
block of text. The RSS icon is at the top left of the sprite, so there's no need to set a value for background-position
in the rss class. The other style rules set the horizontal position to left or right, and then use a negative vertical
position. Designing the sprite with the top of each icon 40px apart made the calculations easy. The styles for the
email, PDF, and external link icons all use attribute selectors, which IE 6 doesn't recognize. If you need to support
IE 6, use classes instead.

■ Css3 introduces image fragments that allow you to select just one part of a Css sprite like this:
image ('images/icons.png #xywh=0,0,20,20 ') . The first two numbers are the horizontal and vertical coordi-
nates (in pixels from the top left of the sprite, and the last two numbers are the width and height (also in pixels) of the
section you want. At the time of this writing, no browser has implemented the new image() notation.

Note

CSS3 Syntax
In CSS3, background-position accepts up to four values. Using one or two values works exactly the same as
in the CSS2.1 syntax. Using three or four values offers greater flexibility by specifying where the offsets are
calculated from using the keywords listed in Table 8-2 in the preceding section. Follow the keyword with the
size of the offset from that position. For example, instead of always calculating the image's position from the top
left, you can specify offsets from the bottom right. Positive values represent an inward offset. Negative values
represent an outward offset. If you omit a value after the keyword, it's assumed to be zero.
The styles in css3_position.html use the same background image for three <div> elements. The position of
each one is specified like this:
#box1 {
background-position: right 30px bottom 30px;
}
#box2 {
background-position: right bottom 30px;
}
#box3 {
background-position: right -20px bottom -20px;
}