title: JQUERY move background with mouse movement
body: <p>I have a div with class <code>box1</code> and it has following css properties(I've given a background image of a random pic from the web)</p>
  
  <pre><code>.box1{
    height:600px;
    width:600px;
    position:absolute;
    background-position:center center;
    background-size:150%;
    top:0;
    left:0;
    background-image:url(http://www.slx-photographic.co.uk/wp-content/uploads/2014/03/Photography-Camera-HD-Wallpaper1.jpg);
  }
  </code></pre>
  
  <p>The question is <strong>HOW DO I MOVE THE BACKGROUND with movement of mouse using <code>mousemove();</code> method of jquery?</strong> as of now I've come this far with JQUERY  and I can't seem to get it to work</p>
  
  <pre><code>$(document).ready(function(){
      $(document).mousemove(function(e){
        var x = e.pageX;
        var y = e.pageY;
  
          $(".box1").css({
             ' background-position':'  x/2 +"20px" , y/2 + "20px" '
          });
      });
  });
  </code></pre>
  
  <p>I am trying to change the background position related to movement of mouse so it will be helpful if somebody could explain it if this is not how you do it..</p>