title: parallax with 100% height divs
body: <p>Currently I am using backstretch (<a href="http://srobbin.com/jquery-plugins/backstretch/" rel="nofollow">http://srobbin.com/jquery-plugins/backstretch/</a>) with smooth scroll to anchor to 100% height sections of my one page website. I am trying to incorporate stellar.js parallax (<a href="http://markdalgleish.com/projects/stellar.js/" rel="nofollow">http://markdalgleish.com/projects/stellar.js/</a>) but am having all kinds of problems. Is there an easy way to make this work with 100% height divs? I have 4 divs with heights of 100% and would like them to scroll at different speeds. Currently I am running stellar against the window.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="main-container" data-stellar-ratio="0.5"&gt;
  &lt;div class="main-container2" data-stellar-ratio="2"&gt;
  &lt;div class="main-container3" data-stellar-ratio="0.5"&gt;
  &lt;div class="main-container4" data-stellar-ratio="2"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.main-container {
  background-image:url(../images/footballfieldblur.jpg);
  min-height:100%;
  height:100%;
  z-index:-100;
  position:relative;
  
  }
  .main-container2 {
  background-image:url(../images/orange3.png);
  min-height:100%;
  height:100%;
  position:relative;
  
  }
  .main-container3 {
  background-image:url(../images/lightbackground.jpg);
  min-height:100%;
  height:100%;
  position:relative;
  
  }
  .main-container4 {
  background-image:url(../images/gopherbackground.png);
  min-height:100%;
  height:100%;
  position:relative;
  }
  </code></pre>
  
  <p>Javascript (backstretch.js)</p>
  
  <pre><code>&lt;script&gt;
  // You may also attach Backstretch to a block-level element
  
  $(".main-container").backstretch("images/footballfieldblur.jpg");
  $(".main-container2").backstretch("images/orange3.png");
  $(".main-container3").backstretch("images/lightbackground.jpg");
  $(".main-container4").backstretch("images/gopherbackground.png");
  &lt;/script&gt;
  </code></pre>
  
  <p>Parallax (stellar.js)</p>
  
  <pre><code>$(document).ready(function() {
        $(window).stellar(); 
        horizontalScrolling:false 
      });
      &lt;/script&gt;
  </code></pre>