Setting Backgrounds & Gradients - Learn to Code HTML and CSS: Develop and Style Websites - page 152

Both the cover and contain keyword values may result in slightly distorted back-
ground images, particularly when the images are stretched beyond their original dimen-
sions. We'll want to keep an eye out for this when using these values, to make sure the
resulting styles are satisfactory.
CSS3 Background Clip & Background Origin
The background-clip property specifies the surface area a background image will
cover, and the background-origin property specifies where the background-
position should originate. The introduction of these two new properties corresponds
with the introduction of three new keyword values: border-box (see Figure 7.13 ) ,
padding-box (see Figure 7.14 ), and content-box (see Figure 7.15 ). Each of these
three values may be used for the background-clip and background-origin
properties.
Click here to view code image
1. div {
2. background: url("shay.jpg") 0 0 no-repeat;
3. background-clip: padding-box;
4. background-origin: border-box;
5. }
Figure 7.13 The border-box value extends the background into the border of an
element