CSS background-origin Property
Description
The background-origin
property determines the background positioning area, that is the position of the origin of an image specified using the background-image CSS property.
- Initial value
- padding-box
- Applies to
- All elements
- Inherited
- No
- Media
- Visual
- Computed value
- As specified
- Animatable
- No
- CSS Version
- CSS3
- JavaScript syntax
- object.style.backgroundOrigin
Syntax
background-origin: <box> [ , <box> ]*
Values
<box> = border-box | padding-box | content-box- border-boxThe position is relative to the border box.
- padding-boxThe position is relative to the padding box.
- content-boxThe position is relative to the content box. Useful for having background images automatically follow the padding.
Example
<div class="test">padding-box</div>
<div class="test2">border-box</div>
<div class="test3">content-box</div>
div {
width: 10em;
height: 10em;
border: 5px dashed orange;
background-image: url(images/diamond.png);
background-repeat: no-repeat;
display: inline-block;
margin-right: 15px;
padding: 15px;
color: black;
}
.test {
background-origin: padding-box;
}
.test2 {
background-origin: border-box;
}
.test3 {
background-origin: content-box;
}
Browser Support
Desktop | |||||
9 | 12 | 1 | 4 | 10.5 | 3 |
Tablets / Mobile | |||||
![]() |
|||||
4 | 18 | 14 | 11 | 1 | 1.0 |
Last updated by CSSPortal on: 20th October 2019