Question

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.

here is the code on JSFiddle: http://jsfiddle.net/v662t/

// HTML

<div id="pageBg">
</div>

//CSS

#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%;
}

// Javascript

$(document).ready(function(){
   $('#pageBg').mousemove(function(e){
      var mousePosX = (e.pageX/$(window).width())*100;
      $('#pageBg').css('background-position-x', mousePosX +'%');
   }); 
});

Answer 1

remove background-size: cover and add a few javascript lines for mousePosY:

var mousePosY = (e.pageY/$(window).height())*100;
$('#pageBg').css('background-position-y', mousePosY +'%');

check out the working fiddle here: http://jsfiddle.net/georgedyer/XWnUA/2/