title: Panning a background image in all directions on mouseover using Javascript
body: <p>I am trying to add a panning effect to background image in a page, the image is quite large 1800 x 1067 ,so basically will be larger than the window
  I want to pan the background in all directions when the mouse reaches the end of the window only , 
  I found a Javascript code that does the panning, but only horizontally , tried playing around with it to enable vertical panning. didnt work. </p>
  
  <p>here is the code on JSFiddle: <a href="http://jsfiddle.net/v662t/" rel="nofollow">http://jsfiddle.net/v662t/</a></p>
  
  <p>// HTML</p>
  
  <pre><code>&lt;div id="pageBg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>//CSS</p>
  
  <pre><code>#pageBg {
      background: url(images/pageBg.jpg) no-repeat 0 0 scroll;
      background-size: cover;
      height: auto;
      left: 0;
      min-height: 768px;
      min-width: 1024px;
      overflow: hidden;
      position: fixed;   
      top: 0;
      width: 100%;
  }
  </code></pre>
  
  <p>// Javascript</p>
  
  <pre><code>$(document).ready(function(){
     $('#pageBg').mousemove(function(e){
        var mousePosX = (e.pageX/$(window).width())*100;
        $('#pageBg').css('background-position-x', mousePosX +'%');
     }); 
  });
  </code></pre>