Parallax Test

HTML

<body>
<div id="bg01" class="bg01">
</div>

<div class="divwrapper">
<div class="div" id="div">
CONTENT
</div>
</div>

<div id="bg02" class="bg02">
</div>
</body>

CSS

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    background-color: red;
}

.divwrapper {
    display: table;
    width: 80%;
    margin:auto; 
    font-size: 12px;
    line-height: 150%;
    text-align: center;
}

.div {
    height:300px;   
}

.bg01 { 
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/52/cc/af/52ccaf818ddc056e12e522b9395dd87d.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.bg02 { 
    background-image: url("http://blog.hostbaby.com/backgrounds/bg_lightwoodfloor.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}