background-origin
The background-origin
CSS property sets the background's origin: from the border start, inside the border, or inside the padding.
Try it
Note that background-origin
is ignored when background-attachment
is fixed
.
Syntax
css
/* 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;
The background-origin
property is specified as one of the keyword values listed below.
Values
border-box
-
The background is positioned relative to the border box.
padding-box
-
The background is positioned relative to the padding box.
content-box
-
The 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 of |
Formal syntax
Examples
Setting background origins
css
.example {
border: 10px double;
padding: 10px;
background: url("image.jpg");
background-position: center left;
background-origin: content-box;
}
css
#example2 {
border: 4px solid black;
padding: 10px;
background: url("image.gif");
background-repeat: no-repeat;
background-origin: border-box;
}
css
div {
background-image: url("logo.jpg"), url("mainback.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 the padding-box
as the background-origin
and therefore the background sits inside the border. The second uses the content-box
and so only displays behind the content.
css
.box {
margin: 10px 0;
color: #fff;
background: linear-gradient(
90deg,
rgba(131, 58, 180, 1) 0%,
rgba(253, 29, 29, 0.6) 60%,
rgba(252, 176, 69, 1) 100%
), radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 1) 28%);
border: 20px dashed black;
padding: 20px;
width: 400px;
background-origin: padding-box, content-box;
background-repeat: no-repeat;
}
html
<div class="box">Hello!</div>
Specifications
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # the-background-origin |
Browser compatibility
BCD tables only load in the browser