<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.