CSS Property: background-origin
The background positioning area — the part of a box that a background’s position is in relation to.
Possible Values
| Value | Description | Example |
|---|---|---|
padding-box | The background position is relative to the padding box. Default behavior. | |
border-box | The background position is relative to the border box. | |
content-box | The background position is relative to the content box. | |
[value], [value] | For multiple backgrounds. Values separated by commas correspond to multiple images separated by commas with background-image. | padding-box, content-box |
inherit | ||
initial | ||
unset | ||
Example
aside {
padding: 10px;
background-image: url("bam.png");
background-position: 0 0;
background-origin: content-box;
}
/* "bam.png" will be painted in the top-left corner of the content area, rather than the wider padding area. */