p.one 
  code border-box
p.two 
  code padding-box
p.three 
  code content-box

@media (min-width: 60em) {
  body {
    display: flex;
  }
  p {
    flex: 1;
  }
}

p {
  align-items: center;
  aspect-ratio: 1/.3;
  background-repeat: no-repeat;
  background-size: cover;
  border: dashed rgb(0,0,0,.5) 1em;
  display: flex;
  justify-content: center;
  margin: 1em;
  // The gap between the border and the content
  padding: 2em;
}

.one {
  background-origin: border-box;
  background-image: url(https://images.unsplash.com/photo-1588694915298-de947f7c7eb7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjY3ODA2OTQ&ixlib=rb-4.0.3&q=80)
}

.two {
  background-origin: padding-box;
  background-image: url(https://images.unsplash.com/photo-1574197725966-51e97c52d553?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjY3ODA2OTQ&ixlib=rb-4.0.3&q=80)
}

.three {
  background-origin: content-box;
  background-image: url(https://images.unsplash.com/photo-1579693207456-a3c037d9a8d4?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjY3ODA2OTQ&ixlib=rb-4.0.3&q=80)
}

code {
  background: rgba(250,250,250,.8);
  border-radius: .7em;
  color: #111;
  padding: .6em 1em;
}