The CSS3 declarations
According to the MDN:
The background-clip CSS property specifies whether an element's background, either the color or image, extends underneath its border.
The background-origin CSS property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.
Both properties have three options:
background-origin property determines where the background is placed (defaulting to padding-box) while the
background-clip determines what part of the background is shown (defaulting to border-box). The properties can be used together or independently.
Some examples may be useful:
border-box- Notice how the background image has been shifted slightly up and to the left so that the origin of its position is under the border of the div (the border has been made transparent to help visualize this).
padding-box(default) - Since the
padding-boxvalue is the default value, this should look the same as the default example.
content-box- Notice how the background image has been shifted slightly down and right so that the origin of its position is the content area of the div, which is determined by the padding applied to the div.
border-box(default) - Here there is no difference from the default example since the background image's origin is the padding box (default) and the background-clip is set to border-box (default). In this case the image isn't being clipped since it fits within the border-box.
padding-box- Here there is no difference from the default example since the background image's origin is the padding box (default) and the background-clip is set to padding-box. Like in the previous example the image isn't being clipped since it fits within the padding-box.
content-box- Here you can see that the background is being clipped as the padding applied to the div creates a small content area. The origin of the background image is still the padding-box.
Background-clip and background-origin used together
padding-boxand background-origin set to
content-box(both non-default values) - here you can see the origin of the image has been set to content-box so that it's pushed down and left from it's normal position by the div's padding. Then the background-clip has been set to padding-box so that the image does not show under the bottom or right border (it would if it were set to border-box).