Background-origin in CSS

Learn about how to use background-origin in CSS. This property is used to specify, the background image origin (meaning: placement) box. By default, the background image is set to be padding-box.
Values : content-box | padding-box | border-box

Example:
CSS:

div{
width: 100px;
height: 100px;
background-color: magenta;
padding: 10px;
border: 5px dotted yellow;
margin: 10px;
background-image: url("flower.jpg");
background-repeat: no-repeat;
background-origin: content-box;
}

HTML:

<div> some text </div>

1. Here we have created <div> with some text.
2. Then we set the height, width, and bg-color of the div.
3. Inserted the bg-image using the background-image property.
4. And then we set the “background-origin” to “content-box”, the background image will be displayed to the content of the div.

Output:

If we set the value to “padding-box“, the output will be displayed as below image :

If we set the value to “border-box“, the background-image is displayed the full border of elements.