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 |
wow ! that is good
The default value for background-origin is padding-box.