title: JS Supersized plugin - images cutting off at edge of viewport
body: <p>So I'm using the Supersized plugin (http://buildinternet.com/2011/07/supersized-3-2-fullscreen-jquery-slideshow/) to display beautiful background images behind the site. It normally stretches to fit whichever size your browser window is. On the iPad, the background cuts off at the end of the viewport. I can pinch to see the whole site and zoom in just fine. But the background stays put.</p>
  
  <p>The most important thing I need to have is the images fill the length and height of the content. Link and css below:</p>
  
  <p><a href="http://www.xsp.com/new_site/index.php" rel="nofollow">http://www.xsp.com/new_site/index.php</a></p>
  
  <p>Any help is greatly appreciated, under the gun here. Thanks.</p>
  
  <pre><code>    /* Supersized styles */
      #supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}
  
      #supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
      #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
      #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
      #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }           /*Quality*/
  
      #supersized li { display:block; margin: 0; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
      #supersized a { width:100%; height:100%; display:block; }
      #supersized li.prevslide { z-index:-20; }
      #supersized li.activeslide { z-index:-10; }
      #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
      #supersized li.image-loading img{ visibility:hidden; }
      #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }
      /* Supersized styles end */
  </code></pre>