CSS background-origin

The background-origin property in CSS determines where the background image or color starts within an element. This property can have three values: padding-box, border-box, and content-box.

Let's see some examples to understand how background-origin works:

Result:
Background Origin: padding-box
<div style="
background-color: lightgray; 
padding: 20px; 
border: 5px solid black; 
background-origin: padding-box;">Background Origin: padding-box</div>

In this example, the background starts at the top-left corner of the padding box, which includes the padding area of the element.

Result:
Background Origin: border-box
<div style="
background-color: lightgray; 
padding: 20px; 
border: 5px solid black; 
background-origin: border-box;">Background Origin: border-box</div>

Here, the background starts at the top-left corner of the border box, which includes the padding and border areas of the element.

Result:
Background Origin: content-box
<div style="
background-color: lightgray; 
padding: 20px; 
border: 5px solid black; 
background-origin: content-box;">Background Origin: content-box</div>

Finally, with background-origin: content-box, the background starts at the top-left corner of the content box, excluding padding and borders.