The CSS background-origin property specifies whether the background image is positioned relative to the element’s border-box, padding-box or content-box. The background-origin is used in conjunction with the background-image property.

Values of the background-origin property:

border-box | padding-box | content-box

The initial value is padding-box.

If the CSS property background-attachment has a value fixed the background-origin is ignored.

border-box

The background image is painted form the edge of the element’s border

background-origin: border-box;

See the Pen background-origin: border-box by majadc (@majadc) on CodePen.

padding-box

The background image is painted below the element’s border but form the edge of its padding.

background-origin: padding-box;

See the Pen background-origin: padding-box by majadc (@majadc) on CodePen.

content-box

The background image is painted below the element’s border and padding.

background-origin: content-box;

See the Pen background-origin: content-box by majadc (@majadc) on CodePen.

Related

• background
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-color

Resources

• CSS3 Spec
• MDN