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.
In this example, there are three div elements with a background image. Here, we are using the padding-box, border-box, and content-box values of the background-origin property.Test 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
Next TopicCSS text-orientation