CSS background-origin Property

Where a background image sits inside an element depends on the CSS background-origin property.

Each of its three values names the edge whose top-left corner the image starts from:

padding-box - the padding edge, which is where the image starts by default.
border-box - the border edge of the element.
content-box - the content edge of the element.

Note: Setting background-attachment to "fixed" leaves this property with no effect.

Example

Three div elements share a border, padding, and a non-repeating background image here, and each one uses a different value of background-origin so you can compare them.

Create a page with three div elements, each with a border, padding, and a background image. The first div uses `background-origin: padding-box`, the second uses `border-box`, and the third uses `content-box`. Set `background-repeat: no-repeat` on all three so the difference in positioning is visible.

> Output: complete HTML page

Prompt

Create a page with three div elements, each with a border, padding, and a background image. The first div uses background-origin: padding-box, the second uses border-box, and the third uses content-box. Set background-repeat: no-repeat on all three so the difference in positioning is visible.

Output: complete HTML page

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS background-origin Property</title>
<style>
div.example {
  border: 10px dashed black;
  padding: 35px;
  background-image: url("img_flwr.gif");
  background-repeat: no-repeat;
  margin-bottom: 20px;
  height: 200px;
}

#div1 {
  background-origin: padding-box;
}

#div2 {
  background-origin: border-box;
}

#div3 {
  background-origin: content-box;
}
</style>
</head>
<body>

<h2>CSS background-origin Property</h2>

<p>background-origin: padding-box (default):</p>
<div class="example" id="div1">
</div>

<p>background-origin: border-box:</p>
<div class="example" id="div2">
</div>

<p>background-origin: content-box:</p>
<div class="example" id="div3">
</div>

</body>
</html>