<div class="image-box">
    style="--image-url: url(https://picsum.photos/2000/3000)"
  <div class="image-box__overlay"></div>
  <div class="image-box__content">
    <h1>Buy our product</h1>
The container box is relative so we can position stuff inside of it 
.image-box {
  position: relative;

.image-box__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
The background image div sizes and positions the background itself.
It's also at the bottom-most position in our "div stack" (z-index 1)

We set the image url via a CSS custom property, that's set via the style attribute in our HTML
.image-box__background {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: var(--image-url);

  z-index: 1

The overlay div is just a colored element with some opacity.
It's above the background image in our stack, so it appears to 
darken the image 
.image-box__overlay {
  background: rgba(0, 0, 0, 0.5);

  z-index: 2;

The content div is at the top of our stack. 
We'd probably add some padding or flexbox properties here as well, 
to place the content appropriately
.image-box__content {
  position: relative;

  z-index: 3;
  color: white;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

/* just for the demo */
html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
h1 {
  font-size: 30px;
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.