The background-origin property sets the background positioning area of an element. In other words, it specifies the original position (of top left corner) of the background image of an element.
CSS
background-origin: value;
The background can be positioned relative to content box, padding box or border box. To understand what constitutes these boxes, have a look at what a CSS box model looks like
CSS Box Model
The box model of an element contains four boxes - content box, padding box, border box and margin.
Content box contains all the content like text, images, tables, of the element.
Padding box consists of the content box along with padding. Padding is the area around the content of the element that separates it from the border. Any background color or image set to the element extends to the padding area also.
Border box consists of the padding box along with borders.
Lastly, the margin area is an empty area that surrounds the border area. It is used to separate the element from other elements which are its neighbours. The larger the margin, more is the distance of the element from its neighbours.
Values
padding-box : Background image origin (its top left corner) is at the top left corner of the padding box. This is the default value.
content-box : Background image origin (its top left corner) is at the top left corner of the content box.
border-box : Background image origin (its top left corner) is at the top left corner of the border box.
initial : Sets the default value of the property.
inherit : Inherits the value from parent element.
Example
See the Pen background-origin examples by Aakhya Singh (@aakhya) on CodePen.
The above demo shows the background image origin for different values of the background-origin property.
Giving different values for different background images
If you want to set different origins for different background images of an element, then you need to give multiple comma-separated values to the background-origin property.
The first value (before first comma) sets the origin of the first background image, the second value for the second image, and so on. If only one value is given, then it will set the origin of all the background images of the element.
HTML
<div></div>
CSS
div {
width: 300px;
height: 152px;
background-image: url('trees.png'), url('forest.jpg');
background-repeat: no-repeat;
background-origin: content-box, border-box;
}
In the above example, the first value content-box sets the origin of the first background image 'trees.png' at the top left corner of the content box, whereas the second value border-box sets the origin of the second background image 'forest.jpg' at the top left corner of the border box.
The demo for this example is shown below.
See the Pen background-origin values for different background images by Aakhya Singh (@aakhya) on CodePen.
Browser Support
This property is supported in all modern browsers. Multiple background images are not supported in IE8 and earlier versions.
