Avatar of Chris Coyier
Chris Coyier on (Updated on )

Take the pain out of building site search with the Algolia hosted API. Start free now!

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.


More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10.5+ 9+ Works Works