title: Main background image fixed, and div's background images inside main div fixed as well
body: <p>I'm having a problem – actually i want to make something that is like a masked parallax scrolling area.</p>
  
  <p>Maybe a good example is this right here <a href="http://davidwalsh.name/parallax" rel="nofollow">http://davidwalsh.name/parallax</a>
  If you scroll down a little there is an iframe with some parallax elements.</p>
  
  <p>I want to have a <strong>main div</strong> with a <code>background-attachment:fixed;</code>, and a div inside the <strong>main div</strong> with a fixed background for its section as well, I want to scroll the whole image not only showing parts of the background image while scrolling down</p>
  
  <p>I though it should work by adding <code>background-attachment:fixed;</code> to the class <code>.bg-fix</code> like this:
  <a href="http://jsfiddle.net/cuginoCoso/k5zk5m9q/2/" rel="nofollow">http://jsfiddle.net/cuginoCoso/k5zk5m9q/2/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="img-strip"&gt;
  &lt;div class="bg-fix slide-img"&gt;&lt;/div&gt;
  &lt;div class="bg-fix slide-img"&gt;&lt;/div&gt;
  &lt;div class="bg-fix slide-img"&gt;&lt;/div&gt;
  &lt;div class="bg-fix slide-img"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.bg-fix {
      background-attachment: fixed;
  }
  #img-strip {
      border: 1px solid #ffff00;
      height: 200px;
      width: 200px;
      overflow: scroll;
      z-index: 30;
  }
  .slide-img {
      height: 300px;
      width: 300px;
      display: block;
  }
  
  .slide-img:nth-child(even) {
      background-image:  url(https://www.webkit.org/blog-files/acid3-100.png);
      background-color: red;
  }
  .slide-img:nth-child(odd) {
      background-image:  url(http://drublic.de/blog/wp-content/uploads/2011/10/rotate-images.jpg);
      background-color: blue;
      margin: 0;
  }
  </code></pre>
  
  <p>Thanks for help</p>