HTML Dog
Skip to navigation

CSS Property: background-origin

The background positioning area — the part of a box that a background’s position is in relation to.

Possible Values

ValueDescriptionExample
padding-boxThe background position is relative to the padding box. Default behavior.
border-boxThe background position is relative to the border box.
content-boxThe 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. */