The background-origin property is used to specify the background positioning area of the background image. It is one of the CSS3 properties.
This property allows you to specify whether the background will be positioned relative to the “content box”, “border box”, or the “padding box”.
Note : If the background-attachment is “ fixed “, then this property will be ignored and will not have an effect.
- Background-origin property accepts the following values.
- padding-box
- border-box
- content-box
- initial
- inherit
Background-Origin property characteristics:
| Initial value | padding-box |
| Applies to | All elements. It also applies to ::first-letter and ::first-line |
| Inherited | No |
| Animatable | No |
| Version | CSS3 |
| JavaScript syntax | object.style.backgroundOrigin = "content-box"; |
Syntax:
background-origin: padding-box | border-box | content-box | initial | inherit;
Values:
| Value | Description |
|---|---|
| border-box | It is the default value. The background-position is relative to the border and the background-image starts from the upper left corner of the padding edge. |
| padding-box | With this value, the background-position is relative to the padding box and the background-image starts from the upper left corner of the border. |
| content-box | The background-position is relative to the content box and the background-image starts from the upper left corner of the content. |
| initial | It will set the property to its default value. |
| inherit | Inherits the property from its parent element. |
Example of the background-origin property:
In the following code, we use the background-origin property for your reference.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #1E90FF;
padding: 35px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "border-box".</p>
<div class="example1">
<h2>Hello world.</h2>
<p> Have a great day!!</p>
</div>
</body>
</html>
Result:
By running the above code, you will get the result as shown in the below image.
Example of background-origin property with the “padding-box” and “content-box” values:
The following example code Wil show the difference between padding-box and content-box.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.example1 {
border: 5px dashed #0000CD;
padding: 35px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");
background-repeat: no-repeat;
background-origin: padding-box;
}
.example2 {
border: 5px dashed #0000CD;
padding: 35px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Flat-Mountains.png");
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin is set to "padding-box" which is the default value of this property.</p>
<div class="example1">
<h2>Hello world</h2>
<p> Have a great day!!</p>
</div>
<p>Here the background-origin is set to "content-box".</p>
<div class="example2">
<h2>Hello world</h2>
<p> Have a great day!!</p>
</div>
</body>
</html>
Result:
After running the above code, you will get the output as shown in the below image.
Example of a background-origin property with different values:
In the below example, you will see how to set two background images.
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
#example1 {
border: 5px double black;
padding: 25px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");
background-repeat: no-repeat;
background-origin: content-box, border-box;
}
#example2 {
border: 5px double black;
padding: 25px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");
background-repeat: no-repeat;
background-origin: content-box, padding-box;
}
#example3 {
border: 5px double black;
padding: 25px;
background: url("https://sharepointanchor.com/wp-content/uploads/2021/02/Large-Triangles.png"), url("https://sharepointanchor.com/wp-content/uploads/2021/02/star.png");
background-repeat: no-repeat;
background-origin: content-box, content-box;
}
</style>
</head>
<body>
<h2>Background-origin property example</h2>
<p>Here the background-origin: content-box, border-box; is set:</p>
<div id="example1">
<h2>Hello World</h2>
<p>The first background-image starts from the upper left corner of the border.</p>
<p>The second background-image starts from the upper left corner of the content.</p>
</div>
<p>Here the background-origin: content-box, padding-box:</p>
<div id="example2">
<h2>Hello World</h2>
<p>The first background image starts from the upper left corner of the padding edge.</p>
<p>The second background-image starts from the upper left corner of the content.</p>
</div>
<p>Here the background-origin: content-box, content-box; is set:</p>
<div id="example3">
<h2>Hello World</h2>
<p>Both background images start from the upper left corner of the content.</p>
</div>
</body>
</html>
Result:
After executing the above code, you will get the result as shown in the below image.
Browser-Support:
Read Ahead:
- CSS background Property
- background-clip property
- CSS background-image property
- HTML Base Tag
- HTML Division tag
Frequently Asked Questions:
What is the purpose of background-origin property?
The background-origin property is used to specify the background positioning area of the background image.
What will happen if we give the background-origin property with the “inherit” value?
It Inherits the property from its parent element.
What are the values accepted by background-origin property?
The values used in background-origin property are padding-box, border-box, content-box, initial, inherit.
Which is the default value of background-origin property?
border-box is the default value. The background-position is relative to the border and the background-image starts from the upper left corner of the padding edge.
The post CSS background-origin property appeared first on Share Point Anchor.
Top comments (0)