Javatpoint Logo
Javatpoint Logo

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.

Syntax

The values of this property are tabulated as follows.

Values Description
padding-box It is the default value that positions the background relative to the padding-box. The background starts from the top left corner of the padding edge.
border-box It positions the background relative to the border-box. The background starts from the top left corner of the border.
content-box It positions the background relative to the content-box. The background starts from the top left corner of the content.
initial It sets the property to its default value.
inherit It inherits the property from its parent element.

Let's understand this property by using some illustrations.

Example1

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

Output

CSS background-origin property

In the next example, we will see how to specify background-origin property when the element has two background images.

Example2

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

Output

Example3

In this example, we are using the initial and inherit values of the background-origin property.

Test it Now

Output

CSS background-origin property




Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA