title: How do you get parallax backgrounds with stellar.js?
body: <p>I'm currently trying to implement parallax backgrounds with the stellar.js query plugin by replicating this: <a href="http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html" rel="nofollow">http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html</a></p>
  
  <p>When calling the stellar function nothing seems to change. </p>
  
  <p>This is my attempt, any ideas of where I'm going wrong?<br/>
  <a href="http://jsfiddle.net/4eBDE/55/" rel="nofollow">http://jsfiddle.net/4eBDE/55/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
          &lt;h1&gt;&lt;a href="../"&gt;Stellar.js&lt;/a&gt; Backgrounds Demo&lt;/h1&gt;
          &lt;div class="photo summer" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Summer&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo autumn" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Autumn&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo winter" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Winter&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo spring" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Spring&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo summer" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Summer&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo autumn" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Autumn&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo winter" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Winter&lt;/span&gt;&lt;/div&gt;
          &lt;div class="photo spring" data-stellar-background-ratio="0.5"&gt;&lt;span&gt;Spring&lt;/span&gt;&lt;/div&gt;
  &lt;/body
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  body {
      font-family: helvetica, arial;
      padding-top: 40px;
  }
  h1 {
      background-color: black;
      color: white;
      height: 40px;
      font-size: 24px;
      font-weight: normal;
      left: 0;
      line-height: 40px;
      position: fixed;
      text-align: center;
      top: 0;
      width: 100%;
      z-index: 1;
  }
  h1 a {
      border-bottom: 1px solid white;
      color: white;
      display: inline-block;
      line-height: 30px;
      text-decoration: none;
  }
  .photo {
      background-attachment: fixed;
      background-position: 50% 0;
      background-repeat: no-repeat;
      height: 450px;
      position: relative;
  }
  .photo span {
      bottom: 0;
      color: white;
      display: block;
      left: 50%;
      margin-left: -640px;
      font-size: 38px;
      padding: 10px;
      position: absolute;
      text-shadow: 0 2px 0 black, 0 0 10px black;
      width: 1280px;
  }
  .summer {
      background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/summer.jpg);
  }
  .autumn {
      background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/autumn.jpg);
  }
  .winter {
      background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/winter.jpg);
  }
  .spring {
      background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/spring.jpg);
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(function () {
      $.stellar({
          horizontalScrolling: false,
          verticalOffset: 40
      });
  });
  </code></pre>