CSS3 provides two new properties,
background-origin, that you can use to specify
where a background should start within an element, and how to clip the
background so that it doesn’t appear in parts of the box model where you
don’t want it to.
To accomplish these tasks, both properties support the following values:
Refers to the outer edge of the border.
Refers to the outer edge of the padding area.
Refers to the outer edge of the content area.
This property specifies whether the background should be ignored (clipped) if it appears within either the border or the padding area of an element. For example, the following declaration states that the background may display in all parts of an element, all the way to the outer edge of the border:
If you don’t want the background to appear within the border area of an element, you can restrict it to only the section of the element inside the outer edge of its padding area, like this:
Or, to restrict the background to display only within the content area of an element, you would use this declaration:
Figure 19-1 shows
three rows of elements displayed in the Safari web browser: the first
border-box for the
background-clip property, the second uses
padding-box, and the third uses
Figure 19-1. Different ways of combining CSS3 background properties
In the ...