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

• 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