background-origin

The background-origin property designates the origin position of a background image.

Syntax

If background-attachment is set to “fixed”, this property has no effect.

div.ex {
  background-image: url('example-image.jpg');
  background-origin: content-box;
}

Values

padding-box
Default value. The background image starts from the top left corner of the padding edge.

border-box
The background image starts from the top left corner of the border.

content-box
The background image starts from the top left corner of the content.

initial
Sets the property to its default value.

inherit
Inherits this property’s value from its parent item.

Browser Compatibilty

Demos

Have a code example of background-origin? Submit a codepen.io demo and we'll showcase it here ↴