CSS background-origin Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The background-origin CSS property determines the positioning origin of a background image or color within an element's box. It essentially specifies where the background should start rendering. This property can take three values: "padding-box" (the default), which positions the background relative to the padding box of the element, "border-box," which positions it relative to the border box, and "content-box," which positions it relative to the content box. Choosing the appropriate value for "background-origin" allows web developers to control how background elements align within an element, which can be particularly useful for design and layout purposes.

Initial value: padding-box
Applies to: All elements
Inherited: No
Computed value: As specified
Animatable: No
JavaScript syntax: object.style.backgroundOrigin

Interactive Demo

background-origin: border-box;
background-repeat: no-repeat;

background-origin: padding-box;
background-repeat: no-repeat;

background-origin: content-box;
background-repeat: no-repeat;

This is the content of the element.

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

Editor