CSS Background-Origin Property

The CSS background-origin property specifies where the top left corner of the background image should be located within the element. There are three possible values:

border-box: the top left corner of the background aligns with the top left corner of the border. This is the default value.
padding-box: the top left corner of the background aligns with the top left corner of the padding area.
content-box: the top left corner of the background aligns with the top left corner of the content area.

The picture below shows where the top left corner of the background image is located for each background-origin value.

CSS Background-Origin Property Description

Below we show an example for each possible value.

Example 1: Background-origin: border-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-image: url(cute-snowmen.jpg);
background-size: 500px;
background-repeat: no-repeat;
background-origin: border-box;

Result:

In Example 1, the background image fills the entire element, including the border area. The border area has been set to be opaque so you can see the presence of the image in the border area.

Example 2: Background-origin: padding-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-image: url(cute-snowmen.jpg);
background-size: 500px;
background-repeat: no-repeat;
background-origin: padding-box;

Result:

In Example 2, the top left corner of the background image aligns with the top left corner of the padding area.

Example 3: Background-origin: content-box

CSS Declaration

border: solid rgba(128,128,128,0.5) 25px;
padding: 25px;
background-image: url(cute-snowmen.jpg);
background-size: 500px;
background-repeat: no-repeat;
background-origin: content-box;

Result:

In Example 3, the top left corner of the background image aligns with the top left corner of the content area.

Next: CSS Gradient

AdBlock Detected!