Overview of CSS background origin Property with example

The background-origin properties in CSS specify the origin position that is the background positioning area of a background image, in other words, it sets the origin position of an image set with the background-image property.
Therefore, its define where to point the background in origin properties across whole inside the border, element or inside the padding.

There are defined four values: content-box, padding-box, border-box and inherit.

always as the default the background image origin of an element is usually the top left corner of the padding box.

In the property, we can set properties for more values with comma-separated values like as when you want to use more different background images.

each value is applied to a corresponding background image (first value for the first image, second value for the second image, third value for the third images and so on).

background-orgin

padding-box defined as the position is relative to the padding box. The default origin of the image at 0 0 is positioned at the top left corner of the padding box.

border-box defined as the relative position is for the border box. The default origin of the image at 0 0 is positioned at the top left corner of the outer edge of the border box.

the content box defined as the position is relative to the content box. The default origin of the image at 0 0 is positioned at the top left corner of the content box.

in CSS properties when you use, the different values it will give result in different effects when combined with other properties such as background-clip and repeat.

In background, the origin properties If the background-attachment value is set to fix, the background value of origin property is ignored.

In images defined inside it: the padding box, the border box, and the content box. There’s also a fourth area called the margin box which includes the element and its outer margin.