parallax background

with css only

by Trina Lu

HTML

<div class="container">

  <section class="parallax" id="p1">
    <p>
      some content in here...
    </p>
  </section>
  <section class="block">
    This is block one.
  </section>
  <section class="parallax" id="p2"></section>
  <section class="block">
    This is block two.
  </section>
  <section class="parallax" id="p3"></section>

</div>

CSS

.container{
  width:100%;
  background-color:#8bc34a;
  background-attachment: fixed;
  background-size:cover;
  background-repeat:no-repeat;
}
.parallax{
  background-attachment: fixed;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  height:500px;
  width:100%;
}
.parallax p {
  padding: 10px;
  background: rgba(255, 255, 255, 0.57);
}

.block{
  height: 200px;
  width: 100%;
  background: rgba(0, 0, 0, 0.68);
  color:#FFF;
  text-align:center;
  line-height: 200px;
}

#p1{
  background-image: url("http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg");
}

#p2{
  background-image: url("http://www.minimit.com/images/picjumbo.com_IMG_6643.jpg");
}

#p3{
  background-image: url("http://www.minimit.com/images/picjumbo.com_DSC_3274.jpg");
}