title: CSS: still image when scrolling but content below to go above it
body: <p>Right now this is what happens when a user scrolls my page:
  <a href="https://www.youtube.com/watch?v=Mtuy1E5JPew" rel="nofollow noreferrer">https://www.youtube.com/watch?v=Mtuy1E5JPew</a></p>
  
  <p>And <a href="http://ffio.it/longobardi/index3.html" rel="nofollow noreferrer"><strong>here</strong></a>'s the page live.</p>
  
  <p>As you can see, <code>img#intro</code> (the big B/W image) scrolls "normally". I'd like to have this movement instead (the 2 images are consequent):</p>
  
  <p><img src="https://i.stack.imgur.com/p42ap.jpg" alt="First"></p>
  
  <p><img src="https://i.stack.imgur.com/p6A6y.png" alt="Second"></p>
  
  <p>As you can see the B/W image stays still but the content below goes up and covers it.</p>
  
  <p>Here's how the elements are placed (easy scheme):</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;img ... /&gt;
      &lt;img ... /&gt;
      &lt;img src="" id="intro" /&gt; &lt;--- THIS IS THE B/W IMAGE!
  
      CONTENT BELOW
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's relevant CSS:</p>
  
  <pre><code>#container {
      position:relative;
      width:1305px;
      height:910px;
  }
  
  #intro {
      margin-top:40px;
      position:absolute;
      z-index:1;
      border-radius:8px
  }
  </code></pre>