Scroll Banner Effect

HTML

<div class="header">
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>HEADER</div>
<div class="main"><div class="banner">BANNER</div></div>

CSS

body {
    background: url("http://lorempixel.com/1000/1000");
    background-attachment: fixed;
}
.main {
    margin-top:300px;
    margin-left: auto;
    margin-right: auto;
    width:60%;
    height:2000px;
    overflow: auto;
    border: solid yellow 2px;
    color:white;
    background: url("http://lorempixel.com/500/1000");
    z-index:0;
}
.banner {
    position: fixed;
    top: 0;
    left:0;
    height: 50px;
    width:100%;
    background: url("http://lorempixel.com/1000/50");
    border:solid yellow 2px;
    color:white;
    margin:0px auto;
    z-index:1000;
}
.header {
    top: 0;
    height: 300px;
    left: 0;
    right: 0;
    margin:0px auto;
    width:100%;
    position: fixed;
    border:solid yellow 2px;
    color:white;
    background: url("http://lorempixel.com/1000/150");
    z-index:-1000;
}