Published
Updated
In-depth front-end engineering courses
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
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1+ | 3+ | 4+ | 10.5+ | 9+ | Works | Works |
wow ! that is good
The default value for background-origin is padding-box.