background-origin sets the origin position of the background image.
The origin can align with content-box, padding-box, or border-box.
A background image with a background-origin value of padding-box.
The image starts at the edge of the padding box -- inside the border.
<style>
.origin {
height: 280px;
padding: 25px;
border: 25px solid moccasin;
background-image: url("/img/css/sunflowers.jpg");
background-origin: padding-box;
}
</style>
<div class="origin"></div>
background-origin: padding-box | border-box |
content-box | initial | inherit;
| Value | Description |
|---|---|
| padding-box | Default. Background image starts from the upper left corner of the padding edge |
| border-box | Background image starts from the upper left corner of the border |
| content-box | Background image starts from the upper left corner of the content |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different background-origin values.
The image shifts to and from the top left with each box change.
<style>
.origin-example {
height: 250px;
border: 25px solid moccasin;
padding: 25px;
background-image: url("/img/css/sunflowers.jpg");
background-origin: content-box;
}
</style>
<div class="origin-example"></div>
This table shows when background-origin support started for each browser.
 Chrome
|
4.0 | Jan 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
9.0 | Mar 2011 |
 Opera
|
10.5 | Mar 2010 |
 Safari
|
3.0 | Jun 2007 |
