Hurry! Try our new Interactive Courses for FREE. 🥳   🚀

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.