title: How to: Dynamically set <BODY> background-position?
body: <p>I posted a question previously that got off topic, I'm reposting with better code that I have VERIFIED is compatible with iPhone (it works with mine anyway!)</p>
  
  <p>I just want to apply background-position coordinates to the body element and call the script conditionally for iPhone, iPod, &amp; iPad.  Here's my conditional call for those devices:</p>
  
  <pre><code>var deviceAgent = navigator.userAgent.toLowerCase();  
  var agentID = deviceAgent.match(/(iphone|ipod|ipad)/);  
     if (agentID) {
        // do something
     } else {
        //do this
     }
  </code></pre>
  
  <p>Now, I've found this excellent script that sets the "top: x" dynamically on the basis of scroll position.  Everyone has told me (and ALL of the tutorials and Google search results as well) that it's impossible to set scroll position dynamically for iPhone because of the viewport issue. HOWEVER, they are wrong because if you scroll to the bottom of the page and view this javascript demo on iPhone, you can scroll and the </p>
  
  <pre><code>&lt;div style="background-position: fixed; top: x (variable)"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>div DOES stay centered on iPhone.  I really hope this question helps alot of people, I thought it was impossible, but it's NOT... I just need help stitching it together!</p>
  
  <p>The original code (you can test it on iPhone yourself) is here:
  <a href="http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/" rel="nofollow">http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/</a></p>
  
  <p>**EDIT: For reference, here is the div that DOES absolute position itself by dynamically applying the "top: x" element as  (even on iPhone):</p>
  
  <p><a href="http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/" rel="nofollow">http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/</a>**</p>
  
  <p>So I just need help getting the following code to apply the dynamic "background-position: 0 x" to the BODY tag where x is centered and relative to the viewport position. Also, needs to be nested inside the above code that is conditional for iPhone and similar devices.</p>
  
  <pre><code>// Page Size and View Port Dimension Tools
  // http://stevenbenner.com/2010/04/calculate-page-size-and-view-port-position-in-javascript/
  if (!sb_windowTools) { var sb_windowTools = new Object(); };
  
  sb_windowTools = {
      scrollBarPadding: 17, // padding to assume for scroll bars
  
      // EXAMPLE METHODS
  
      // center an element in the viewport
      centerElementOnScreen: function(element) {
          var pageDimensions = this.updateDimensions();
          element.style.top = ((this.pageDimensions.verticalOffset() + this.pageDimensions.windowHeight() / 2) - (this.scrollBarPadding + element.offsetHeight / 2)) + 'px';
          element.style.left = ((this.pageDimensions.windowWidth() / 2) - (this.scrollBarPadding + element.offsetWidth / 2)) + 'px';
          element.style.position = 'absolute';
      },
  
      // INFORMATION GETTERS
  
      // load the page size, view port position and vertical scroll offset
      updateDimensions: function() {
          this.updatePageSize();
          this.updateWindowSize();
          this.updateScrollOffset();
      },
  
      // load page size information
      updatePageSize: function() {
          // document dimensions
          var viewportWidth, viewportHeight;
          if (window.innerHeight &amp;&amp; window.scrollMaxY) {
              viewportWidth = document.body.scrollWidth;
              viewportHeight = window.innerHeight + window.scrollMaxY;
          } else if (document.body.scrollHeight &gt; document.body.offsetHeight) {
              // all but explorer mac
              viewportWidth = document.body.scrollWidth;
              viewportHeight = document.body.scrollHeight;
          } else {
              // explorer mac...would also work in explorer 6 strict, mozilla and safari
              viewportWidth = document.body.offsetWidth;
              viewportHeight = document.body.offsetHeight;
          };
          this.pageSize = {
              viewportWidth: viewportWidth,
              viewportHeight: viewportHeight
          };
      },
  
      // load window size information
      updateWindowSize: function() {
          // view port dimensions
          var windowWidth, windowHeight;
          if (self.innerHeight) {
              // all except explorer
              windowWidth = self.innerWidth;
              windowHeight = self.innerHeight;
          } else if (document.documentElement &amp;&amp; document.documentElement.clientHeight) {
              // explorer 6 strict mode
              windowWidth = document.documentElement.clientWidth;
              windowHeight = document.documentElement.clientHeight;
          } else if (document.body) {
              // other explorers
              windowWidth = document.body.clientWidth;
              windowHeight = document.body.clientHeight;
          };
          this.windowSize = {
              windowWidth: windowWidth,
              windowHeight: windowHeight
          };
      },
  
      // load scroll offset information
      updateScrollOffset: function() {
          // viewport vertical scroll offset
          var horizontalOffset, verticalOffset;
          if (self.pageYOffset) {
              horizontalOffset = self.pageXOffset;
              verticalOffset = self.pageYOffset;
          } else if (document.documentElement &amp;&amp; document.documentElement.scrollTop) {
              // Explorer 6 Strict
              horizontalOffset = document.documentElement.scrollLeft;
              verticalOffset = document.documentElement.scrollTop;
          } else if (document.body) {
              // all other Explorers
              horizontalOffset = document.body.scrollLeft;
              verticalOffset = document.body.scrollTop;
          };
          this.scrollOffset = {
              horizontalOffset: horizontalOffset,
              verticalOffset: verticalOffset
          };
      },
  
      // INFORMATION CONTAINERS
  
      // raw data containers
      pageSize: {},
      windowSize: {},
      scrollOffset: {},
  
      // combined dimensions object with bounding logic
      pageDimensions: {
          pageWidth: function() {
              return sb_windowTools.pageSize.viewportWidth &gt; sb_windowTools.windowSize.windowWidth ?
                  sb_windowTools.pageSize.viewportWidth :
                  sb_windowTools.windowSize.windowWidth;
          },
          pageHeight: function() {
              return sb_windowTools.pageSize.viewportHeight &gt; sb_windowTools.windowSize.windowHeight ?
                  sb_windowTools.pageSize.viewportHeight :
                  sb_windowTools.windowSize.windowHeight;
          },
          windowWidth: function() {
              return sb_windowTools.windowSize.windowWidth;
          },
          windowHeight: function() {
              return sb_windowTools.windowSize.windowHeight;
          },
          horizontalOffset: function() {
              return sb_windowTools.scrollOffset.horizontalOffset;
          },
          verticalOffset: function() {
              return sb_windowTools.scrollOffset.verticalOffset;
          }
      }
  };
  </code></pre>