Background Attachment

Experimenting with background attachment

by Anupama

HTML

<section class="parallax">
    <div class="p-1"></div>
    <div class="p-2"></div>
    <div class="p-3"></div>
    <div class="p-4"></div>
</section>
<section class="content">
    <header>
        Parallax example using CSS
    </header>
    <section>
        <p>This is an example of parallax effect using CSS</p>
        <p> Reference : <a href="http://davidwalsh.name/parallax">David Walsh's Blog</a></p>
    </section>
</section>

CSS

.content {
    position:relative;
}
.parallax {
    height: 682px;
}
.parallax [class*="p-"] {
    position:relative;
    background-attachment: fixed;
    background-repeat:no-repeat;
    height:100%;
}
.p-1 {
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg");
}
.p-2 {
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax2.jpg");
}
.p-3 {
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax3.jpg");
}
.p-4 {
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/30354/parallax1.jpg");
}