JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="imgwrap">
        <div id="img"></div>
    </div>
</div>

<div id="mainwrap">
    <div id="content">Content</div>
</div>

<div id="footer">Footer</div>

CSS

body {
background:url(http://img262.imageshack.us/img262/1297/bckv.png);
background-size:100%;
}

#header {
position:fixed;
top:0;
left:0;
height:100px;
width:100%;
overflow:hidden;
}

#imgwrap {
width:100%;
height:100%;
background:url(http://img262.imageshack.us/img262/1297/bckv.png);
background-size:100%;
}

#img {
position:fixed;
width:500px;
height:100px;
top:0;
left:50%;
margin-left:-250px;
background:url(http://img15.imageshack.us/img15/9140/hdrn.png);
}

#content {
width:500px;
height:10000px;
background:rgba(0,0,0,0.5);
margin:100px auto 0;
}

JavaScript

$(window).scroll(function() {
    var s = $(window).scrollTop();
    $('#imgwrap').height($(document).height());
    $('#header').scrollTop(s);
});