<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
.container {
  position: relative;
  
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.container > div {
  clip-path: xywh(0 0 100% 100% round 15px);
  
  flex: 1 1 30%;
  height: 150px; 
}

.container > div:before {
  background-repeat: no-repeat;
  background-image: url('https://habrastorage.org/webt/67/2e/54/672e542340b84860602626.png');
  background-size: cover;
  background-position: 50%;
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  z-index: -1;
  
  content: "";
}

html {
  min-height: 100%;
  background: linear-gradient(45deg, #797, #227)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.