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
Explorer Edge Chrome Firefox Opera Safari
9121410.53
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
418141111.0

Last updated by CSSPortal on: 20th October 2019