.parallax-wrapper {

<header>

<h1> Whee </h1>

</header>

<div class="parallax-wrapper">

<div class="content">

<div id="project">

<header>

<h2> Project </h2>

</header>

<div> We did stuff </div>

</div>

<div id="team">

<header>

<h2> Notebook </h2>

<div> We wrote about stuff </div>

</div>

<!-- foreground -->

<div id="foreground">

<img id="bg-project" src="https://static.igem.org/mediawiki/2013/f/f7/Cornell_IMG_4699.jpg" alt="pipetting glove">

<img id="bg1-team" src="https://static.igem.org/mediawiki/2013/0/07/Luengvarinkul_oat.jpg" alt="Oat">

</div>

<!-- midground -->

<div id="midground">

<img id="mid1" src="http://f6design.com/projects/parallax-scrolling/img/cloud-lg1.png" alt="Big cloud">

<img id="mid2" src="http://f6design.com/projects/parallax-scrolling/img/cloud-lg1.png" alt="Big cloud">

<img id="mid3" src="http://f6design.com/projects/parallax-scrolling/img/cloud-lg1.png" alt="Big cloud">

<img id="mid4" src="http://f6design.com/projects/parallax-scrolling/img/cloud-lg1.png" alt="Big cloud">

</div>

<!-- background -->

<div id="background">

<img id="back1" src="http://s8210.storage.proboards.com/5498210/i/XsOgTFwPEcw6_rDCXT56.jpg" alt="Eric's favorite fish">

<img id="back2" src="http://s8210.storage.proboards.com/5498210/i/XsOgTFwPEcw6_rDCXT56.jpg" alt="Eric's favorite fish">

</div>