CSS Property background-origin

The background-origin property specifies what’s known as the background positioning space. That is, it specifies wherever the origin of the background image (its higher left corner) are once the background is painted.

The completely different values can end in different effects once combined with different background properties like background-repeat and background-clip.

If the background-attachment worth is ready to fastened, the worth of the background-origin property is unnoticed.

An element in CSS has three areas, known as boxes, outlined within it: the border box, the cushioning box, and therefore the content box.
There’s conjointly a fourth space known as the margin box which has the part and its outer margin.

The background image origin of a component is typically the highest left corner of the cushioning box.

The background-origin property may take comma-separated values so once the part has over one background image, every worth is applied to a corresponding background image (first worth for the primary image, second worth for the second image, and so on).

CSS Property background-origin Value

  • padding-box
  • border-box
  • content-box

padding-box

The position is relative to the cushioning box. The origin of the image at zero zero is positioned at the highest left corner of the cushioning box.

border-box

The position is relative to the border box. The origin of the image at zero zero is positioned at the highest left corner of the periphery of border box.

content-box

The position is relative to the content box. The origin of the image at zero zero is positioned at the highest left corner of the content box.

Desktop Browser Support

Mobile Browser Support

Examples

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

One comment

  1. You made several nice points there. I did a search on the subject and found nearly all people will consent with your blog.

Leave a Reply