<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>
.container {
  max-width: 100%;
  margin: 0 auto;
}

.box1 {
  width: 200px;
  height: 200px;
  background-image: url("https://benic360.com/wp-content/uploads/2021/06/hex-logo.png"), url("https://images.unsplash.com/photo-1658242106760-7a5c8f177180?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  margin-bottom: 5px;
}

.box2 {
  width: 200px;
  height: 200px;
  background-image: url("https://benic360.com/wp-content/uploads/2021/06/hex-logo.png"), linear-gradient(gray, yellow);
  background-size: cover;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.