title: Make images (position:fixed) be visible only inside a DIV
body: <p>I want to create a website, inspired by <a href="http://cirkateater.no/en/" rel="nofollow">http://cirkateater.no/en/</a> .<br>
  <strong>The images shall stay at the same position on the Screen (position:fixed), but inside the next div, the second image shall be visible.</strong>    <br><br></p>
  
  <p>My first solution was to use background-images, which worked.</p>
  
  <p>With background-images, it looked like this JSFIDDLE: 
  <strong><a href="http://jsfiddle.net/Ryanous/r7mLm4wg/4/" rel="nofollow">http://jsfiddle.net/Ryanous/r7mLm4wg/4/</a></strong> (<em>i do not own these images</em>)<br>
  Consider the following code:  </p>
  
  <pre><code>&lt;div class="background" style='background-image:url("http://mintywhite.com/wp-content/uploads/2012/10/fond-ecran-wallpaper-image-arriere-plan-hd-29-HD.jpg");'&gt;&lt;/div&gt;&lt;div class="background" style='background-image:url("http://vpnhotlist.com/wp-content/uploads/2014/03/image.jpg");'&gt;&lt;/div&gt;
  </code></pre>
  
  <p><br><br></p>
  
  <p><strong>But I also want to move the images via JS later on!</strong>
  You cant manipulate backgroundimages top-offset easily, so I decided to use an img-tag instead.
  <br><br>
  Now, using the img-tag, the images seem to be independent of their divs, and overlap each other so that <em>always only one image is visible</em>.</p>
  
  <p>( <em>id like to include my current code but stackoverflow wont let me do. four spaces dont do anything, i cant format my code.</em> )</p>
  
  <p><br><br>
  <strong>So my question is:
  <br><br><br>
  How can I make images be only visible inside a certain div, but keep their positions fixed?</strong></p>