The CSS background-origin property defines the origin position (the background positioning area) of a background image.
Demo:
Syntax:
background-origin: padding-box|border-box|content-box;padding-box (default) – the background image starts from the upper left corner of the padding edge.
border-box – the background image starts from the upper left corner of the border.
content-box – the background image starts from the upper left corner of the content.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#example-1 {
border: 10px dashed black;
padding: 25px;
background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
background-repeat: no-repeat;
background-origin: content-box;
}
#example-2 {
border: 10px dashed black;
padding: 25px;
background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
background-repeat: no-repeat;
background-origin: border-box;
}
#example-3 {
border: 10px dashed black;
padding: 25px;
background: url(https://lenadesign.org/wp-content/uploads/2021/06/icon.png);
background-repeat: no-repeat;
background-origin: padding-box;
}
</style>
</head>
<body>
<h4>background-origin: content-box;</h4>
<div id="example-1">
<p>Some text...some text...some text..some text...</p>
<p>Some text...some text...some text..some text...</p>
</div>
<h4>background-origin: border-box;</h4>
<div id="example-2">
<p>Some text...some text...some text..some text...</p>
<p>Some text...some text...some text..some text...</p>
</div>
<h4>background-origin: padding-box; </h4>
<div id="example-3">
<p>Some text...some text...some text..some text...</p>
<p>Some text...some text...some text..some text...</p>
</div>
</body>
</html>Output:
background-origin: content-box;
Some text…some text…some text..some text…
Some text…some text…some text..some text…
background-origin: border-box;
Some text…some text…some text..some text…
Some text…some text…some text..some text…
background-origin: padding-box;
Some text…some text…some text..some text…
Some text…some text…some text..some text…
Enjoy coding!
Read also: