JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="coverPhoto">
        <div class="wrapper">
            <p>This is my content.</p>
            <div class="push"></div>
        </div>
    </div>
    <div class="footer">
        <p>Footer is NOT overlayed over the image</p>
    </div>
</body>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#coverPhoto {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    background-image: url(http://i.imgur.com/fJYziTr.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.push {
    height: 4em;
}
.footer {
    height: 4em;
    background-color: rgba(0,0,0,0.5);
}