Adding Backgrounds - Beginning CSS3 - page 162

#box1 {
width: 80%;
margin-left: 5%;
}
#box2 {
width: 60%;
margin-left: 10%;
}
The left margin of the <div> elements has been set to align the 25% mark of each one. As Figure 8-14 shows,
the dark gradient always fills the left quarter of each <div> even when the browser is resized.
Figure 8-14. The proportions of the background image remain unchanged at different widths
Using Negative Offsets with CSS Sprites
Because background images are cut off when they extend beyond the element to which they're applied, you can
combine multiple images in a single file and then use negative background-position offsets to display only a
portion of the background image—a technique known as using a CSS sprite . The main advantages of CSS sprites
are that they reduce the number of requests to the web server, and they often result in smaller image sizes,
speeding up the download of the page. Most major sites, including Amazon, YouTube, and Apple, use them to
consolidate their icons.
When designing a CSS sprite, you need to take into account where the individual images are going to be
used. The sprite shown in Figure 8-15 contains five icons stacked at 40px intervals.