<div class="padding-box"><p>padding-box</p></div>
<div class="border-box"><p>border-box</p></div>
<div class="content-box"><p>content-box</p></div>
div {
border: 10px dotted rgba(0,0,0,.5);
width: 25%;
height: 250px;
margin-bottom: 45px;
background: url('https://lorempixel.com/300/300/cats/10/') no-repeat;
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
display: inline-block;
padding: 16px;
}
p {
color:yellow;
text-align: center;
margin-top: 25%;
font-size: 3em;
}
div.padding-box {
background-origin: padding-box;
}
.border-box {
background-origin: border-box;
}
.content-box {
background-origin: content-box;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.