title: Parallax background position in window calculation
body: <p>Can somebody please help me with what first appeared a simple function, but now has me pulling my hair out?</p>
  
  <p>I am using a pretty simple chunk of jQuery that is binding to the window scroll function. I believe I have all the variables I need to get this working but it would appear not. My math(s) appears to be lacking.</p>
  
  <p>I apologise for not being able to attach an image due to having zero reputation! The variables I have are, the browser window (x), the height of my div (y) which has a scrolling background image, the background image height (z) and the scrolling position of the top of the div to the top of the browser window (o).</p>
  
  <p>The background position of the div needs to move relative to the div's position within the window so that the whole image will be seen from the div scrolling from top to bottom (and vice versa) of the browser window.</p>
  
  <p>My calculations are these:-</p>
  
  <pre><code>x+y gives me the whole range of movement the div will require to cover 
  from it first being visible to it finally leaving the screen.
  
  z-y gives me the range of movement the background image will require to 
  cover for the whole image to scroll through the div as the div scrolls
  through the browser window.
  
  (z-y)/(x+y) gives me the number of pixels the background image has to 
  move for every 1 pixel the browser window will scroll.
  
  As an example,
  x = 200
  y = 50
  z = 150
  o starts at -50 and ends at 200
  
  x+y = 250 (full div movement)
  z-y = 100 (bg image movement)
  (z-y)/(x+y) = 0.4 bg movement per pixel scrolled
  </code></pre>
  
  <p>Therefore, as the div position is scrolled from -50 all the way to 200, the bg image needs to scroll from 0 to -100. </p>
  
  <p>I'm at a loss as to how to tie these last threads together. Can anyone help me correlate these numbers?</p>
  
  <p>Thanks in advance, and sorry if it sounds dumb.</p>
  
  <p>Mark</p>
  
  <p>Here's my final code, thanks to Vincent and Rob for their help. This should work with any parallax scrolling needed using data-type="background" for any sized area. The speed will be dictated to by the browser height and background image size. Thanks again guys.</p>
  
  <pre><code>$(function(){
          $(window).bind('scroll', function() {
              $window = $(window);
             $('section[data-type="background"]').each(function(){
              var $bgobj = $(this);
              var windowHeight = 0;
                  windowHeight = document.body.clientHeight;
              var img = new Image;
                  img.src = $(this).css('background-image').replace(/url\(|\)$/ig, "");
              var bgImgHeight = parseInt(img.height);
              var divHeight = parseInt($(this).css('height'));
              var scrollPos = $(this).position().top - $window.scrollTop();
                  var bgMovement = bgImgHeight - divHeight;
                  var scrollMovement = windowHeight + divHeight;
                  var intPos = scrollPos + divHeight;
                  var yPos = ((bgMovement) / (scrollMovement)) * intPos;
                  var coords = '50% '+ (-yPos) + 'px';
                  $bgobj.css({ backgroundPosition: coords });
              });
          });
      }); 
  </code></pre>