CSS background-origin property specifies the origin of the background image.
By default, the background-origin property is set to padding-box. This means that the background image will start from the top left corner of the element’s padding area.
Similarly, If we set the background-origin property to content-box, the background image will start from the top left corner of the element’s content area. The same applies to border-box also.
Try out the example below for a clear understanding:
Example:
div{
background-image: url('images/sand.jpg');
background-repeat: no-repeat;
background-origin: content-box;
border: 10px dashed blue;
padding: 30px;
}
CSS Syntax
The background-origin property has the following syntax:
background-origin: padding-box|border-box|content-box|initial|inherit;
Property Values
The background-origin property accepts the following values:
| padding-box | The background image starts from the top-left corner of the element’s padding area. This is the default value. |
| border-box | The background image starts from the top-left corner of the element’s border area. |
| content-box | The background image starts from the top-left corner of the element’s content area. |
| initial | Sets the background-origin property to its default value(padding-box). |
| inherit | Inherits the background-origin property from the parent element. |
General Info
| Default Value | padding-box |
| Inherited | No |
| JavaScript Usage | element.style.backgroundOrigin = “content-box” |
Related Pages
CSS Tutorial: CSS Background
