This CSS attribute allows us to modify the backdrop image of the web page. It defines the position of the background image, which is the starting point. This CSS attribute is ineffective if the background-attachment value is fixed.
The background-origin attribute functions similarly to the background-clip attribute; however, it adjusts the size of the background rather than clipping it. By default, an element's origin is set to the top-left corner of the viewport.
If there are multiple background images set for an element, it is possible to assign distinct values to the background-origin property for each background image by using commas to separate them. Each image will align according to its respective background-origin property value.
Syntax
background-origin: padding-box | border-box | content-box | initial | inherit;
The values for this attribute are presented in the table below.
| 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 instance, there are three division elements containing a background image. In this scenario, we are employing the padding-box, border-box, and content-box options of the background-origin attribute.
<!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 C# Tutorial
</p>
</div>
<h2> background-origin: padding-box; </h2>
<div id = "padding">
<p>
Welcome to the C# Tutorial
</p>
</div>
<h2> background-origin: content-box; </h2>
<div id = "content">
<p>
Welcome to the C# Tutorial
</p>
</div>
</body>
</html>
Output
In the following instance, we will demonstrate how to define the background-origin attribute for an element that encompasses two background images.
Example2
In this instance, we are employing two background-images for the division elements. Specifically, there are four division elements where the background-origin attribute is being utilized.
<!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 C# Tutorial
</p>
</div>
<h2> background-origin: padding-box, border-box; </h2>
<div id = "div2">
<p>
Welcome to the C# Tutorial
</p>
</div>
<h2> background-origin: content-box, content-box; </h2>
<div id = "div3">
<p>
Welcome to the C# Tutorial
</p>
</div>
<h2> background-origin: content-box, padding-box; </h2>
<div id = "div4">
<p>
Welcome to the C# Tutorial
</p>
</div>
</body>
</html>
Output
Example3
In this instance, we are employing the initial and inherit values of the background-origin attribute.
<!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 C# Tutorial
</p>
</div>
<h2> background-origin: inherit; </h2>
<div id = "div2">
<p>
Welcome to the C# Tutorial
</p>
</div>
</body>
</html>
Output