Definition:
CSS background-origin starts from the top left corner of the element.
Property Values are:
background-origin:
padding-box;
border-box;
content-box;
Initial;
Inherit;
Syntax:
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
background-origin: initial;
background-origin: inherit;
let’s use the following image to set as a background-origin. Keep in mind that the background-origin always starts from the top left corner.
Let’s have a look in detail by applying each background-origin value.
Here is the image I am going to use in background-origin.

1) padding-box;
<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<div id="background-origin">
<h1>Padding-box</h1>
<p> Here is an example of background-origin with padding-box value. See clearfully the image starts from the top left corner of the padding box.</p>
</div>
</body>
</html>
Result:

2. border-box
<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed black;
padding: 10px;
background-repeat: no-repeat;
background-origin: border-box;
}
</style>
</head>
<body>
<div id="background-origin">
<h1>border-box</h1>
<p>Here is an example of background-origin with border-box value. See clearfully the image starts from the top left corner of the border box.</p>
</div>
</body>
</html>
Result:

See the above example of background-origin with border-box value. The image starts from the top left corner of the border-box.
3. Content-box
<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: content-box;
}
</style>
</head>
<body>
<div id="background-origin">
<h1>border-box</h1>
<p>Here is an example of background-origin with content-box value. See clearfully the image starts from the top left corner of the content box.</p>
</div>
</body>
</html>
Result:

See the above example of background-origin with content-box value. The image starts from the top left corner of the content box.
4. Initial
<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: initial;
}
</style>
</head>
<body>
<div id="background-origin">
<h1>border-box</h1>
<p>Here is an example of background-origin with initial value.</p>
</div>
</body>
</html>
Result:

5. Inherit
<!DOCTYPE html>
<html>
<head>
<style>
#background-origin {
background: url('http://www.elsebazaar.com/blog/wp-content/uploads/2020/03/Tutorial.png');
border: 10px dashed red;
padding: 10px;
background-repeat: no-repeat;
background-origin: inherit;
}
</style>
</head>
<body>
<div id="background-origin">
<h1>border-box</h1>
<p>Here is an example of background-origin with inherit value.</p>
</div>
</body>
</html>
Result:

Donate to support writers.
You may interest on the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)