Home/ Questions/Q 7786311
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:23:49+00:00

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

  • 0

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.

The most important thing I need to have is the images fill the length and height of the content. Link and css below:

http://www.xsp.com/new_site/index.php

Any help is greatly appreciated, under the gun here. Thanks.

    /* 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 */
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I figured out one way to fix it with iPhone/iPad css media queries. It’s probably not the best way, more like putting tape on it so it will hold together. But it works so I’m happy:

    /*Fix Supersized on iOS*/

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#supersized { margin-left:0;}
}
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#supersized { width:110% !important;}
}


/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
#supersized { margin-left:0; }
}
    • 0