Text overlay background-color rgba

Question

I'm trying to create a background-color overlay that exactly matches the size of an image, and display text on that overlay. But the background-color also overlay the text, hope anyone help me fix it.

HTML

<header>
    <span class="header-overlay"></span>
    <div class="container">
        <div class="logo">
            <a href="#">
                <img src="http://content.screencast.com/users/HungSzczesny/folders/Default/media/7e690146-93d1-477a-a4fc-8d5ddfefabf7/logo.png" alt="Logo">
            </a>
        </div>  <!-- end logo -->

        <div class="main-nav">
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">who</a></li>
                <li><a href="#">work</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">team</a></li>
                <li><a href="#">contact</a></li>
            </ul>
        </div>  <!-- end main-nav -->

        <div class="tagline">
            <p>hello we are</p>
            <h1>lazy day</h1>
        </div>  <!-- end tagline -->
    </div>
</header>

CSS

*{
    margin: 0;
    padding: 0;
}

header{
    background: url('http://content.screencast.com/users/HungSzczesny/folders/Default/media/8cda5714-151b-4084-b130-870ec9a38607/header-bg.png') no-repeat center center fixed;
    width: 100%;
    height: 990px;
    position: relative;
    z-index: 0;
    .background-size(cover);
}

.header-overlay{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.12);
}

http://jsfiddle.net/ag513947/

Answer 1

.header-overlay { z-index: -1; } Try that?