Learning PHP, MySQL, JavaScript, and CSS, 2nd Edition

CSS3 Backgrounds

CSS3 provides two new properties, background-clip and 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:

border-box

Refers to the outer edge of the border.

padding-box

Refers to the outer edge of the padding area.

content-box

Refers to the outer edge of the content area.

The background-clip Property

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:

background-clip:border-box;

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:

background-clip:padding-box;

Or, to restrict the background to display only within the content area of an element, you would use this declaration:

background-clip:content-box;

Figure 19-1 shows three rows of elements displayed in the Safari web browser: the first row uses border-box for the background-clip property, the second uses padding-box, and the third uses content-box.

Figure 19-1. Different ways of combining CSS3 background properties ...