CSS Overlay makes text dark

Question

I am trying to make a div that overlays another div to make the background image appear darker. It works, but instead of making the image darker, everything is darker, such as the text. Even though the overlay div is before the other divs that have the text elements inside of them

Here's a snippet that show what's happening:

.header {
    background: url("http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg") no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0.5;
}

.heading {
    display: inline-block;
    font-size: 3em;
}

.nav-item {
    font-size: 1.3em;
    float: right;
    list-style-type: none;
    padding: 0px 5px;
}

.nav-item > a {
    color: white;
    font-weight: bold;
    display: block;
}

a {
    color: black;
    text-decoration: none;
}

<div class="header">
        <div class="overlay"></div>
        <div class="nav">
            <!-- <img src="img/logo.png" alt="logo" class="logo"> -->
            <li class="nav-item"><a href="https://jordanbaron.github.io">Home</a></li>
            <li class="nav-item"><a href="#about" >About</a></li>
            <li class="nav-item"><a href="#portfolio" >Portfolio</a></li>
            <li class="nav-item"><a href="#contact">Contact</a></li>
        </div>
        <h1 class="heading" id="heading"></h1>
    </div>

Possible duplicate of [How to add a color overlay to a background image?](https://stackoverflow.com/questions/36679649/how-to-add-a-color-overlay-to-a-background-image) — yqlim, Jan 29 '19 at 01:39

score 6 · Accepted Answer · answered Jan 29 '19 at 01:35

The default z-index for any element is auto, which means it gets its z-index from its parent. In your code, only the .overlay class has a z-index and it's set at 1, which means it will be put in front of elements with a lower z-index, such as your .nav element.

To fix this, you simply need to assign a z-index higher than 1 to the .nav class. Remember that only positioned elements can have a z-index, so you should do something like this:

.nav {
  position: relative;
  z-index: 2;

Your snippet fixed:

.header {
    background: url("http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg") no-repeat center center fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-repeat: no-repeat;
    color: white;
    width: 100%;
    height: 100%;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    opacity: 0.5;
}

.heading {
    display: inline-block;
    font-size: 3em;
}

.nav-item {
    font-size: 1.3em;
    float: right;
    list-style-type: none;
    padding: 0px 5px;
}

.nav-item > a {
    color: white;
    font-weight: bold;
    display: block;
}

a {
    color: black;
    text-decoration: none;
}

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

<div class="header">
        <div class="overlay"></div>
        <div class="nav">
            <!-- <img src="img/logo.png" alt="logo" class="logo"> -->
            <li class="nav-item"><a href="https://jordanbaron.github.io">Home</a></li>
            <li class="nav-item"><a href="#about" >About</a></li>
            <li class="nav-item"><a href="#portfolio" >Portfolio</a></li>
            <li class="nav-item"><a href="#contact">Contact</a></li>
        </div>
        <h1 class="heading" id="heading"></h1>
    </div>

You may also want to consider other, cleaner methods of making the image darker, such as the CSS filter property.

@JordanBaron It's mostly the same idea, you would just put the background image on the `.overlay` element and set the filter there (so it wouldn't affect `.nav`'s content). Here's an example, I just used `::after` insted of another `div`: https://codepen.io/anon/pen/VgjOpd — ngr900, Jan 29 '19 at 01:55

CSS Overlay makes text dark

1 Answers1