<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;
  
}