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>
- Here we have created <div> with some text.
- Then we set the height, width, and bg-color of the div.
- Inserted the bg-image using the background-image property.
- 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.