jquery - background image movement dependent on mouse position -

i'm trying make background image move in relation mouse position within container, i'm trying mimic same effect seen here, top banner links move in relation mouse position in view.

i've started try , calculate myself struggling equation make work.

$(function(){     var container = $('.container');     var img = $('.container img');     var ch = container.height();     var cw = container.width();     var ih = img.height();     var iw = img.width();      container.on('mousemove', function(e){         var x = (e.pagex - container.offset().top)/cw*100;         var y = (e.pagey - container.offset().left)/ch*100;         img.css({'left': x, 'top': y});         $('span').empty().append(x + ' : '+y)     }); }); 

i've put fiddle show progress, far tracking , updating image position based on position half right, aim mouse bottom right corner of container , see bottom right of image.

i'm guessing need calculate based on mouses position center of container can't figure out equation.

i think i've got it. down image moving against itself. image move minus calculation img.css({'left': -x, 'top': -y}) , got desired effect.

i think best results containment div want same ratio image.

$(function(){     var container = $('.container');     var img = $('.container img');     var ch = container.height();     var cw = container.width();     var ih = img.height();     var iw = img.width();      container.on('mousemove', function(e){         var x = (e.pagex - container.offset().top)/cw*100;         var y = (e.pagey - container.offset().left)/ch*100;         img.css({'left': -x, 'top': -y});         $('span').empty().append(x + ' : '+y)     }); });