transparent colored overlay over background image

Question

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 like to know why the following doesn't work:

Fiddle: http://jsfiddle.net/bzvrwqhu/2/

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;
}

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

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

If you look at the fiddle you will see that the text also has the gradient over it. I don't understand why this is so. The 2 elements are on same level and I have applied z-index of 2 to my element with content. So should it not be sitting on top without being affected by the color?

Answer 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;
  }

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