background-origin

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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:

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.

Browser support

IEEdgeChromeFirefoxSafariOpera
9+AllAll4+All11.5+
iOS SafariChrome AndroidFirefox AndroidAndroid BrowserOpera Mobile
AllAllAll4.1+All
Source: caniuse

More information