Clash Royale CLAN TAG#URR8PPP

transparent colored overlay over background image [duplicate]

This question already has an answer here:

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?

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

1 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:

z-index

position:relative

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>