Transparent Colored Overlay Over Background Image

I'm trying to create a background image and then a transparent color over it. However, the problem I am running into is that the entire website gets the transparent code. I would l

Solution 1:

z-index only applies to positioned elements (i.e. not static position). So add position:relative to it to activate the z-index:

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;
  color: #FFF;
}

.content {
  z-index: 2;
  position:relative;
}

.curtain {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(11, 150, 113, 0.5);
    z-index: 1;
  }

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