Easily manage projects with monday.com
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.