Question

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.

Answer 1

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.

• https://developer.mozilla.org/en-US/docs/CSS/background-clip
• https://developer.mozilla.org/en-US/docs/CSS/background-origin

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:

• Default (neither property specified)

Background-origin

• Background-origin set to 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).
• Background-origin set to padding-box (default) – Since the padding-box value is the default value, this should look the same as the default example.
• Background-origin set to 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

• Background-clip set to 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.
• Background-clip set to 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.
• Background-clip set to 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

• Background-clip set to 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).