The background-origin property defines where to paint the background: across the whole element, inside the border, or inside the padding.

There are four values: border-box, padding-box, content-box and inherit. Here’s a demo:

See the Pen Background Origin Demo by Timothy Miller (@tjacobdesign) on CodePen.

background-origin is similar to background-clip, except it resizes the background rather than clipping it.

The above example has background-size: cover and background-repeat: no-repeat also applied. If that wasn’t the case, the image would repeat underneath the border or padding.

Related

• background-attachment
• background-clip
• background-color
• background-image
• background-position
• background-repeat
• background-size

More Resources

• CSS3 Spec
• MDN

Browser Support