CSS background-origin Property

The background-origin property specifies the origin position (the background positioning area) of a background image.

The background-origin is a property defined in CSS which helps in adjusting the background image of the webpage. This property is used to set the origin of the image in the background. By default, this property sets the background image origin to the upper-left corner of the screen/webpage.

Syntax:

background-origin: padding-box|border-box|content-box|initial|
inherit;

Property Value:
initial: This takes the initial/default value of setting the background origin to the padding edge int the upper left corner.

Example -

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
  border: 10px dashed black;
  padding: 25px;
  background: url(/css/images/image4.jpg), url(/css/images/image3.jpg);
  background-repeat: no-repeat;
  background-origin: content-box, padding-box;
}

#example2 {
  border: 10px dashed black;
  padding: 25px;
  background: url(/css/images/image4.jpg), url(/css/images/image3.jpg);
  background-repeat: no-repeat;
  background-origin: content-box, border-box;
}

#example3 {
  border: 10px dashed black;
  padding: 25px;
  background: url(/css/images/image4.jpg), url(/css/images/image3.jpg);
  background-repeat: no-repeat;
  background-origin: content-box, content-box;
}
</style>
</head>
<body>

<h2>background-origin: content-box, padding-box:</h2>
<div id="example1">
  <h2>Hello World</h2>
  <p>The "/css/images/image3.jpg" background image starts from the upper left corner of the padding edge.</p>
  <p>The "/css/images/image4.jpg" background image starts from the upper left corner of the content.</p>
</div>

<h2>background-origin: content-box, border-box:</h2>
<div id="example2">
  <h2>Hello World</h2>
  <p>The "/css/images/image3.jpg" background image starts from the upper left corner of the border.</p>
  <p>The "/css/images/image4.jpg" background image starts from the upper left corner of the content.</p>
</div>

<h2>background-origin: content-box, content-box:</h2>
<div id="example3">
  <h2>Hello World</h2>
  <p>Both background images starts from the upper left corner of the content.</p>
</div>

</body>
</html>