The CSS3 declarations background-clip and background-origin seem to have the same effect on the background. They both appear to restrict the background to a certain area relative to the HTML element, so I was wondering if there really is a difference in function of these two 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.
while
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: border-box, padding-box, and content-box. The 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:
Background-origin
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-box value 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.Background-clip
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-box and 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).