title: jQuery on window scroll animate background image position
body: <p>I am trying to achieve a scrolling effect using jQuery. I have a background div set to 100% browser window size with overflow hidden. This has a large background image that is approx. 1500px x 2000px. </p>
  
  <p>The effect I want is when the user scrolls down the page the background image moves at a percentage of the scrolled distance, so for every 200px scrolled down the page the image moves 10px in the same direction.</p>
  
  <p>Can anyone point me in the right direction? Is this even possible? : ) Many thanks in advance.</p>
  
  <p>UPDATE</p>
  
  <p>I have since tried variations on the suggestion by @Capt Otis but I'm still struggling the code I am playing around with is as follows:</p>
  
  <pre><code>$(window).scroll(function(){
      if($(this).scrollTop() &gt; 200) {
          $('#div').animate({'background-postion': '+=10px 0'}, 500);
      }
  });     
  </code></pre>
  
  <p>Can anyone shed any light on what I am doing wrong?</p>