title: Moving a div within a div on mouse move
body: <p>Can someone help me with a issue I have. So I have two divs div1 needs to be the height and width of the browser screen and over flow hidden. </p>
  
  <p>Within that div I have another div div2 which is twice the width and hight of the first div. I then need to move that div around on mouse move. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#view-window {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
  }
  
  #background-wrapper {
    background: url('../images/background.png') no-repeat center center;
    background-size: 100% 100%;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="view-window"&gt;
    &lt;div id="background-wrapper"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Kind of like this but when my mouse is in the top left corner of the view box the top top of the red box should be in that corner also. </p>
  
  <p><a href="https://codepen.io/anon/pen/bqKogL" rel="nofollow noreferrer">https://codepen.io/anon/pen/bqKogL</a> </p>