Skip to main content
Home / CSS Almanac / Properties / B / background-origin

background-origin

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

More Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
1+ 3+ 4+ 10.5+ 9+ Works Works
icon-link icon-logo-star icon-search icon-star