title: Parallax effects with Stellar.js
body: <p>I'm working on a website and I want to implement some slight parallax effects.</p>
  
  <p>Here is my site so far:</p>
  
  <p><a href="http://claytonkinder.com/" rel="nofollow">http://claytonkinder.com/</a></p>
  
  <p>I want the parallax to affect the gray field background image so that it scrolls at a different rate, but I can't configure it to work.</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div id="top-block" data-stellar-background-ratio="0.5"&gt;
      &lt;div class="bg-title"&gt;
          &lt;h1 id="site-title"&gt;MODERN&lt;/h1&gt;
      &lt;/div&gt;
          &lt;h2 id="site-subtitle"&gt;A splash of color&lt;/h2&gt;
  
      &lt;a href="#"&gt;
          &lt;div class="top-block-button button1"&gt;Watch Video&lt;/div&gt;
      &lt;/a&gt;
      &lt;a href="#"&gt;
          &lt;div class="top-block-button button2"&gt;Download&lt;/div&gt;
      &lt;/a&gt;    
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>#top-block {
     background-image: url('../../img/block.jpg');
     background-repeat: no-repeat;
     background-size: cover;
     text-align: center;
     padding-top: 200px;
     padding-bottom: 200px;
  }
  </code></pre>
  
  <p>And here is my jQuery:</p>
  
  <pre><code>$(function(){
     $.stellar();
  });
  </code></pre>
  
  <p>I can't figure out where I went wrong according to the Stellar.js documents.</p>