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

HTML

<div class="test">padding-box</div> 

<div class="test2">border-box</div> 

<div class="test3">content-box</div>

CSS

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;  
}

Result