CSS Parallax Effect

Give different positions to different background images and see the parallax effect on resizing the browser

by prasun_sultania

HTML

<body>
    <div class="midground">
        <div class="foreground">
            <p>Your content will go here!</p>
        </div>
    </div>
</body>

CSS

body {
background-image: url(http://www.mediafire.com/conv/222f995a27fabd2d2bb79d25da11d1f98f4e9ef564d4eb026da3c661efea19536g.jpg);
background-repeat: repeat-x;
background-color:#d3ff99;
background-position: 50% 0;
}
.midground {
background-image: url(http://www.mediafire.com/conv/5dca27752b609c8020bda2c0a4e661a37afa1c11bbd88df82312419f127b780b6g.jpg);
background-repeat: repeat-x;
background-color: transparent;
background-position: 10% 0;
}
.foreground {
background-image: url(http://www.mediafire.com/conv/ff4abee9a3faba81437be5c64abfa4d5661a0bf7433d9bc044fe6bce6aef5dbc6g.jpg);
background-repeat: repeat-x;
background-color: transparent;
background-position: 150% 0;
}