title: Parallax scrolling of separate div (with ‘position: absolute’ and slideshow background)
body: <p>I have website with a menu on top, then a banner that spans 70% of the page (height), below there’s the content of the page. In the banner I have a jQuery slideshow covering the whole window. I want to add parallax scrolling to this slideshow background that is visible through the “empty” banner.</p>
  
  <p>My setup is like that the background with slideshow is a separate div before all other content on the site and then set it to ‘position: absolute’ and ‘z-index: -100’.</p>
  
  <p>Beacause if I let the div with the background span over all other content, all that content is parallax scrolled and not the background only…</p>
  
  <p><strong>So how can I make a seperate div parallax scroll?</strong></p>
  
  <p>Take a look at my demonstration at <a href="http://jsfiddle.net/dpZML/2/" rel="nofollow"><strong>JSFiddle</strong></a>.</p>
  
  <p><em>Simplification of HTML:</em></p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="parallax-bg"&gt;&lt;/div&gt;
      &lt;div id="menu"&gt;&lt;/div&gt;
      &lt;div class="banner"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><em>Simplification of CSS:</em></p>
  
  <pre><code>html {
      height: 100%;
      min-height:100%;
      margin: 0px;
      padding: 0px;
  }
  body {
      height: 100%;
      min-height:100%;
      min-width: 100%;
      padding: 0;
      margin:0;
      width: 100%;
      z-index:-100;
  }
  #parallax-bg {
      height: 100%;
      z-index:-100;
      position: absolute;
      width: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center top;
      min-height:100%;
      min-width: 100%;
  }
  #menu {
      height: 100px;
      width: 100%;
  }
  .banner {
      width: 100%;
      height: 70%;
  }
  .content {
      width: 100%;
  }
  </code></pre>
  
  <p><em>Script used to parallex scrolling:</em></p>
  
  <pre><code>jQuery(window).scroll(function () {
  
      jQuery('#bg').css({
          'top': -(jQuery(this).scrollTop() / 2) + "px"
      });
  });
  </code></pre>