Overlapping background

index.html

<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
  <div class="title">A cool effect <span class="small">scroll down to see it</span></div>
<div class="container">
   <section class="stuff1"></section>
   <section class="stuff2"></section>
</div>

script.js

/* 
Had this idea for a while 
Thought it would be really complicated 
Turns out you can do it with native CSS :)

Mary Lou at codrops is awesome 
http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/ 
*/

style.css

body {padding: 0; margin: 0}
.container section {height: 1000px;}
.container section {
  position: relative;
  background-position: 50% 140px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.stuff2 {
  background-color: rgb(61,69,75);
  background-image: url(http://i.imgur.com/r0Sl6bI.png);
}
.stuff1 {
  background-color: rgb(92,69,96);
  background-image: url(http://i.imgur.com/AwJZPOd.png);
}
.title {
  margin: 20px;
  font-size: 3em;
  color: rgb(255,127,102);
  font-family: "Roboto Slab", sans-serif;
}
.small {
  font-size: 0.4em;
  float: right;
  margin-top: 25px;
}