title: Web Parallax Scrolling Background Image and Text
body: <p>Fiddle of the issue: <strong><a href="http://jsfiddle.net/Vy365/3/" rel="nofollow">http://jsfiddle.net/Vy365/3/</a></strong></p>
  
  <p>I'm trying to create sections on a page that have a parallax scrolling effect.</p>
  
  <p>The main CSS I'm using to achieve this is <code>background-attachment: fixed</code> for the background image, and <code>position: fixed</code> for the text on top of the image.</p>
  
  <p>I have multiple div's with this effect on the page, and I want each section to cover up those that come before it.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;section&gt;
      &lt;div id="parallax-1" class="parallax"&gt;
          &lt;div class="title"&gt;
              &lt;h1&gt;Fixed Text 1&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="scrolling-content"&gt;Scrolling Content&lt;/section&gt;
  
  &lt;section&gt;
      &lt;div id="parallax-2" class="parallax"&gt;
          &lt;div class="title"&gt;
              &lt;h1&gt;Second Fixed Text&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section class="scrolling-content"&gt;Scrolling Content&lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.parallax {
      margin: 0 auto;
      padding: 0;
      position: relative;
      width: 100%;
      max-width: 1920px;
      height: 200px;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 0;
      z-index: 1;
  }
  
  .parallax .title {
      position: fixed;
      top: 80px;
  }
  
  #parallax-1 {
      background-image: url(http://placekitten.com/500/200);
  }
  
  #parallax-2 {
      background-image: url(http://placekitten.com/500/202);
  }
  
  .scrolling-content {
      position: relative;
      width: 100%;
      height: 200px;
      background: #ffffff;
      z-index: 2;
  }
  </code></pre>
  
  <p>The background images cover up one another appropriately, however the fixed text remains fixed on the page (once again, see the <a href="http://jsfiddle.net/Vy365/3/" rel="nofollow">fiddle</a>).</p>
  
  <p>Is there any way to fix this with CSS? Or do I have to do some yucky jquery window scroll monitoring?</p>