CSS background-origin Property
The background-origin property in CSS asserts the origin of the background from the starting of the border, inside the border, or inside the padding. This property is ignored when the background-attachment property is fixed.
This property may be specified as one of the keywords like border-box, padding-box, or content-box. The border-box value sets the background image to position relative to the border box.
In the case of padding-box, The background is positioned relative to the padding box and in the case of the content-box, the background gets positioned relative to the content box.
Syntax
background-origin: padding-box|border-box|content-box|initial|
inherit;
Values for the background-origin Property
|
Value
|
Description
|
|
border-box
|
In this case, the background is at a position relative to the border-box.
|
|
padding-box
|
In this case, the background is at a position relative to the padding-box.
|
|
content-box
|
In this case, the background is at a position relative to the content-box.
|
Example: CSS background-origin Property
Here in the example below, we are using the background-origin property with different background origins, borders and their different values. In this case, we have given the background-origin as 'border-box'. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.
<!DOCTYPE html>
<head>
<title>Background-origin</title>
<style type="text/CSS">
div {
border: 4px solid black;
padding: 10px;
background: url('image.gif');
background-repeat: no-repeat;
background-origin: border-box;
}
</style>
</head>
<body>
<div class="box">Hello!</div>
</body>
</html>
Output
Example: CSS background-origin Property using two gradients
In this example, we have given a thick dotted border to the object. The first gradient uses 'padding-box' as the background-origin and hence the background sits inside the border. The second one uses the content-box and so only displays behind the content.
<!DOCTYPE html>
<head>
<title>Two gradients</title>
<style type="text/CSS">
.box {
margin: 10px 0;
color: #fff;
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,0.6) 60%, rgba(252,176,69,1) 100%),
radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 28%);
border: 20px dashed black;
padding: 30px;
width: 500px;
background-origin: padding-box, content-box;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="box">Hello! Welcome to Study Tonight!</div>
</body>
</html>
Output
Example: CSS background-origin Property with the 'content-box' value
In the example below, we are using the background-origin property with different background origins, borders and their different values. In this case, we have given the background-origin as 'content-box'. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colours or styles or variants, etc. The CSS is embedded inside the html code with the code- <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.
<!DOCTYPE html>
<head>
<title>Background-origin</title>
<style type="text/CSS">
div {
border: 10px double;
padding: 10px;
background-position: center left;
background-origin: content-box;
}
</style>
</head>
<body>
<div class="box">Hello! Welcome To Study Tonight!</div>
</body>
</html>
Output
Live Example
Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.
Browser Compatibility
The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.
| Name of Browser |
Background size |
contain and cover |
| Chrome |
1 |
1 |
| Edge |
12 |
12 |
| Firefox |
4 |
4 |
| Internet Explorer |
9 |
9 |
| Opera |
10.5 |
10.5 |
| Safari |
3 |
3 |
| Webview Android |
4.1 |
4.1 |
| Chrome Android |
18 |
18 |
| Firefox Android |
14 |
14 |
| Opera Android |
11 |
11 |
| IOS Safari |
1 |
1 |
| Samsung Internet |
1.0 |
1.0 |
Conclusion
The initial value for the background-origin is 'padding-box'. This property is applicable to all elements and is also applicable to '::first-letter' and '::first-line'. It is not an inherited property. The computed value for this property is the specified one.
