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

Figure 7.14 The padding-box value extends the background into the padding of
an element, but the background is contained within any border
Figure 7.15 The content-box value contains the background within the border
and padding of an element
The background-clip property value is set to border-box by default, allowing
a background image to extend into the same area as any border. Meanwhile, the
background-origin property value is set to padding-box by default, allowing the
beginning of a background image to extend into the padding of an element.
We first discussed these keyword values when we covered the box-sizing property back in
Lesson 4 , “ Opening the Box Model .” The values themselves haven't changed in meaning,
but their functions do change with the use of the different background properties.
Summary
Adding backgrounds and gradients to our pages allows us to bring color to the forefront of
our designs. These features also help to define how content is grouped and to improve the
layout of our pages as a whole.
To review, this lesson covered the following:
• How to add background colors and images to elements