DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.
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
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 9+ | All | All | 4+ | All | 11.5+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| All | All | All | 4.1+ | All |
More information
Related properties
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
background-image
.element { background: url(texture.svg); }
background-position
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
background-size
.element { background-size: 300px 100px; }
wow ! that is good
The default value for background-origin is padding-box.