CSS background-origin property
This CSS property helps us to adjust the background image of the webpage. It specifies the background position area, i.e., the origin of a background image. This CSS property will not work when the value of the background-attachment is set to be fixed.
The background-origin property is similar to the background-clip property, but it resizes the background instead of clipping it. By default, the origin of an element is the top-left corner of the screen.
If the element has more than one background image, then we can specify a different value of the background-origin property for each background-image, separated by commas. Every image will match with the corresponding value of the background-origin property.
The values of this property are tabulated as follows.
Let's understand this property by using some illustrations.
Example1Test it Now
In the next example, we will see how to specify background-origin property when the element has two background images.
In this example, we are using two background-images for the div elements. Here, there are four div elements on which we are applying the background-origin property.Test it Now
In this example, we are using the initial and inherit values of the background-origin property.Test it Now