Table of Contents

CSS Background-origin property

The background-orgin set the property origin position.

Syntax- background-origin: padding-box|border-box|content-box;

  • Padding-box: The background image starts from the upper left corner of the padding edge. This is Default value.
  • 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>
<title> background-origin property </title>
<style>

#border{
background-image: url('https://nielitbhu.com/new logo');
background-origin: border-box;
background-repeat: no-repeat;
border: 10px dashed blue;
padding: 30px;
}
#padding{
background-image: url('https://nielitbhu.com/new logo');
background-origin: padding-box;
background-repeat: no-repeat;
border: 10px dashed blue;
padding: 25px;
}
#content{
background-image: url('https://nielitbhu.com/new logo');
background-origin: content-box;
background-repeat: no-repeat;
border: 10px dashed blue;
padding: 25px;
}
h2,h3{
color: red;
}
</style>
</head>

<body>
<h1>CSS Background-origin property</h1>
<h2> background-origin: border-box; </h2>
<div id = "border">
<h2>Welcome To Nielitbhu.com</h2>
<h3>Hello World</h3>
</div>
<h2> background-origin: padding-box; </h2>
<div id = "padding">
<h2>Welcome To Nielitbhu.com</h2>
<h3>Hello World</h3>
</div>
<h2> background-origin: content-box; </h2>
<div id = "content">
<h2>Welcome To Nielitbhu.com</h2>
<h3>Hello World</h3>

</div>
</body>
</html>