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.


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.


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.


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.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.