CSS background-origin Property

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

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

<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

The following table will show you the current browser support for the CSS background-origin property.

Desktop
Edge Chrome Firefox Opera Safari
121410.53
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
181411114

Last updated by CSSPortal on: 1st January 2024