Adding Backgrounds - Beginning CSS3 - page 167

Figure 8-20. The image is repeated, but starts from a different position

If you examine the backgrounds closely, you can see that the flower is tiled from the top-left corner of the
rst <div> ; but in the middle <div> it begins from inside the border; and the first whole flower in the final <div>
begins under the content.

■ When a background image is repeated, it tiles in both directions along the vertical and/or horizontal axis.
The background-position and background-origin properties determine only its starting point. They have no control
over the background painting area.

Note

To control the extent of the background, you need to use the background-clip property, which affects both
background colors and images. The styles in background-clip.html set the background painting area in each
<div> like this:
#box1 {
background-origin: border-box;
background-clip: border-box;
}
#box2 {
background-origin: padding-box;
background-clip: padding-box;
}
#box3 {
background-origin: content-box;
background-clip: content-box;
}

Figure 8-21 shows how the background in the left <div> extends under the border. In the middle <div> , it's
painted inside the border. And in the right <div> , the background is confined to the content.