<section>
<div class="bg-img"></div>
<div class="bg-img"></div>
</section>
section{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

//solid color using linear gradient
.bg-img {
  width: 50vw;
  height: 100vh;
  background:linear-gradient(
      rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
  background-size: cover;
}

//linear gradient overlay with multi-colors
.bg-img:nth-child(2) {
  background:linear-gradient(to bottom right, rgba(0, 47, 75, 0.5), rgba(220, 66, 37, 0.5)), url('https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80') center center no-repeat;
  background-size: cover;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.