background-origin

div.test { background-origin: padding-box;}
div.test1 { background-origin: border-box;}
div.test2 { background-origin: content-box;}

Value	Description
padding-box	Sets the origin to the padding box (outer edge of the padding). This is the default value.
border-box	Sets the origin to the border box (outer edge of the border).
content-box	Sets the origin to the content box (the area inside the padding).

※ The background image used in the samples is shown below.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: padding-box;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: border-box;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: content-box;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

※ Version data is based on MDN / Can I Use.

Sets the origin position (starting point) for background rendering.

The samples below show the background image without tiling so you can clearly see the difference. Note how the starting position of the background image changes with each value.

With padding-box, the background image starts from inside the border (at the padding edge).

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: padding-box; background-repeat: no-repeat;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

With border-box, the background image starts from outside the border.

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: border-box; background-repeat: no-repeat;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

With content-box, the background image starts from inside the padding (the content area).

<div style="border: dashed 10px rgba(0, 0, 255, 0.5); height: 100px; padding: 10px; font-weight: bold; background-image: url(/dics/dictionary-css/img/sample_bg1.png); background-origin: content-box; background-repeat: no-repeat;">A 100px tall div with 10px padding. Border is 'dashed 10px rgba(0, 0, 255, 0.5)'.</div>

background-origin is easy to confuse with background-clip. The key difference is: background-clip sets the area within which the background is painted, while background-origin sets the starting point of the background rendering.