background-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Thebackground-originCSS property sets the background's origin: from the border start, inside the border, or inside the padding.
Note thatbackground-origin is ignored whenbackground-attachment isfixed.
Try it
background-origin: border-box;background-repeat: no-repeat;background-origin: padding-box;background-repeat: no-repeat;background-origin: content-box;background-repeat: no-repeat;<section> <div>This is the content of the element.</div></section>#example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333333; font-size: 2em; font-weight: bold;}Syntax
/* Keyword values */background-origin: border-box;background-origin: padding-box;background-origin: content-box;/* Global values */background-origin: inherit;background-origin: initial;background-origin: revert;background-origin: revert-layer;background-origin: unset;Thebackground-origin property is specified as one of the keyword values listed below.
Values
border-boxThe background is positioned relative to the border box.
padding-boxThe background is positioned relative to the padding box. Default value.
content-boxThe background is positioned relative to the content box.
Formal definition
| Initial value | padding-box |
|---|---|
| Applies to | all elements. It also applies to::first-letter and::first-line. |
| Inherited | no |
| Computed value | as specified |
| Animation type | a repeatable list |
Formal syntax
background-origin =
<visual-box>#
<visual-box> =
content-box|
padding-box|
border-box
Examples
Setting background origins
.example { border: 10px double; padding: 10px; background: url("image.jpg"); background-position: center left; background-origin: content-box;}#example2 { border: 4px solid black; padding: 10px; background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box;}div { background-image: url("logo.jpg"), url("main-back.png"); /* Applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box;}Using two gradients
In this example the box has a thick dotted border. The first gradient uses thepadding-box as thebackground-origin and therefore the background sits inside the border. The second uses thecontent-box and so only displays behind the content.
.box { margin: 10px 0; color: white; background: linear-gradient( 90deg, rgb(131 58 180 / 100%) 0%, rgb(253 29 29 / 60%) 60%, rgb(252 176 69 / 100%) 100% ), radial-gradient(circle, white 0%, black 28%); border: 20px dashed black; padding: 20px; width: 400px; background-origin: padding-box, content-box; background-repeat: no-repeat;}<div>Hello!</div>Specifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-origin |