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.

<!DOCTYPE html>
<html>
<head>
<title> background-origin property </title>
<style>
div{
padding: 20px;
width: 350px;
height: 175px;
background-image:  url('jtp.png');
background-repeat: no-repeat;
border: 8px dashed blue;
color: red;
font-size: 25px;
text-align: center;
}
#border{
background-origin: border-box;
}
#padding{
background-origin: padding-box;
}
#content{
background-origin: content-box;
}
h2{
color: red;
}
</style>
</head>

<body>
<h2> background-origin: border-box; </h2>
<div id = "border">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin: padding-box; </h2>
<div id = "padding">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin: content-box; </h2>
<div id = "content">
<p>
Welcome to the javaTpoint.com
</p>
</div>
</body>
</html>

Test it Now

Output

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.

<!DOCTYPE html>
<html>

<head>
<title>background-origin property</title>
<style>
div{
padding: 20px;
width: 350px;
height: 175px;
background-image:  url('jtp.png'), url('lion.png');
background-repeat: no-repeat;
border: 8px dashed blue;
color: red;
font-size: 25px;
text-align: center;
}

#div1{
background-origin: border-box, content-box;
}
#div2{
background-origin: padding-box, border-box;
}
#div3{
background-origin: content-box, content-box;
}
#div4{
background-origin: content-box, padding-box;
}

h2{
color: red;
}
</style>
</head>

<body>
<h2> background-origin: border-box, content-box; </h2>
<div id = "div1">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin: padding-box, border-box; </h2>
<div id = "div2">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin: content-box, content-box; </h2>
<div id = "div3">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin: content-box, padding-box; </h2>
<div id = "div4">
<p>
Welcome to the javaTpoint.com
</p>
</div>
</body>

</html>

Test it Now

Output

Example3

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

<!DOCTYPE html>
<html>

<head>
<title>background-origin property</title>
<style>
div{
padding: 20px;
width: 350px;
height: 175px;
background-image:  url('jtp.png');
background-repeat: no-repeat;
border: 8px dashed blue;
color: red;
font-size: 25px;
text-align: center;
}

#div1{
background-origin: initial;
}
#div2{
background-origin: inherit;
}
h2{
color: red;
}
</style>
</head>

<body>
<h2> background-origin: initial; </h2>
<div id = "div1">
<p>
Welcome to the javaTpoint.com
</p>
</div>
<h2> background-origin: inherit; </h2>
<div id = "div2">
<p>
Welcome to the javaTpoint.com
</p>
</div>
</body>

</html>

Test it Now

Output