JSFiddle - React, Tailwind, and code Playground

HTML

<div class="curtain"></div>
<div class="content">
  My Content
</div>

SCSS

html {
  background: url('https://images.pexels.com/photos/70497/pexels-photo-70497.jpeg?cs=srgb&dl=food-dinner-lunch-70497.jpg&fm=jpg') no-repeat center center fixed;
  backgorund-size: cover;
  
  .curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 150, 113, 0.5);
    z-index: 1;
  }
}

.content {
  z-index: 2;
}