why does CSS background-size: cover not work in portrait mode on iOS?

Question

I'm trying to set up a manualy splash-image across devices. I'm doing so by checking for orientation (touch devices) or screen width vs. screen height (none touch) and set a url accordingly.

Then I add this CSS rule via Javascript:

 document.styleSheets[3].insertRule('.initHandler:before { 
    background: url('+x+') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }', 0)

With x being the image to be loaded depending on orientation and screen size.

My problem is this works fine in landscape mode, but on my iPad in portrait mode, the correct image is loaded (differ depending on portrait/landscape), BUT it is not expanded to fullscreen size.

Question:
Can I not use CSS background-size on iOS in portrait-mode?

Thanks for help!

EDIT:
Just tried on my Android Smartphone. Works fine there. Makes no sense, why it doesn't work on iPad.

@boltclock i know you have commented on http://stackoverflow.com/questions/11216432/css-background-position-and-ios#11216432 question, still please go through it again and try to understand this question is different — iMeMyself, Sep 26 '12 at 10:38
I've tested this page http://www.css3.info/demos/background-size-cover.html on iPad, and it works both in potrait and landscape, so maybe there's something else going on. Can you provide a full code sample? — Giona, Sep 26 '12 at 10:46
@GionaF: I guess it's my old iPad1 (iOS3), because the link you mentioned will not resize on my device. What iPad version are you using? — frequent, Sep 26 '12 at 10:51
2, iOS6 ... So maybe you can use a jQuery fallback like http://louisremi.github.com/jquery.backgroundSize.js/demo/ — Giona, Sep 26 '12 at 10:52

score 21 · Answer 1 · answered Oct 04 '12 at 19:44

Ok. Here is how it's working (Thanks to @iMeMyself):

body {
    background: url(...) no-repeat center center fixed; 
    -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    }

So first set it to 100%, then to cover. This way all browser that cannot cover get the 100% value, while the ones that can get the 100% overwritten by cover.

Better to do "background-size: auto 100vh", because iPhone on 100% is enlarged. And actually this approach doesn't even work... iPhone tries to use "cover" and photo is bad. — Martin Zvarík, May 19 '23 at 13:30

score 8 · Accepted Answer · edited Mar 28 '15 at 15:46

While checking orientation please take note of these points from apple document -

Provide Launch Images :

iPhone-only applications may only have one launch image. It should be in PNG format and measure 320 x 480 pixels. Name your launch image file Default.png.

iPad-only applications: Create a launch image for each supported orientation in the PNG format. Each launch image must be 1024 x 748 pixels (for landscape) or 768 x 1004 pixels (for portrait).

Universal applications: Include launch images for both iPhone and iPad.

Update Your Info.plist Settings Specify values for the UISupportedInterfaceOrientations and UIInterfaceOrientation

and

Not all browsers recognize the cover keyword for background-size, and as a result, simply ignore it.

So we can overcome that limitation by setting the background-size to 100% width or height, depending on the orientation. We can target the current orientation (as well as the iOS device, using device-width). With these two points I think you can use CSS background-size:cover on iOS in portrait-mode

Here are some other resources I also came across while looking for a solution: Flexible scalable background images, full scalable background images, perfect scalable background images, and this discussion.

@Rachel thanks for the edit.. i will be posting my answers in similar format :) — iMeMyself, Sep 26 '12 at 13:15

score 3 · Answer 3 · answered Oct 04 '17 at 17:36

According to Designing Websites for iPhone X iOS 11 introduces a new extension for the existing viewport meta tag called viewport-fit, which provides control over the insetting behavior. The default setting is auto, which will not cover the entire screen.

In order to disable the default inset behavior and cause the page to lay out to the full size of the screen, you can set viewport-fit to cover as shown here:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Without this setting existing techniques used for splash screens and full-size hero images may not display as expected on the iPhone X or other conformant iOS devices.

score 2 · Answer 4 · answered Apr 23 '14 at 14:20

Code here

It fixing background images for ipad

Just enter sizes according to your image dimentions

/* Page background-image landscape for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image portrait for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image landscape for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
  }
}
/* Page background-image portrait for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 5024px 2024px !important;
    background-size: 5024px 2024px !important;
  }
}

score 1 · Answer 5 · answered Nov 02 '16 at 12:09

As far as I'm aware, this method works on all IOS devices. Depending on your other page elements (header etc) you may need to adjust z-index for the &:before psuedo-element.

html {
    height:100% !important;
}

body {
    height:100%;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
    // use your own class here //
    &.body-class { 
        // @screen-xs-max is a Bootstrap3 variable name //
        @media screen and (max-width:@screen-xs-max) {
            min-height:100vh;
            position:relative;
            &:before {
                position:fixed;
                top:0;
                left:0;
                right:0;
                bottom:0;
                display:block;
                content:"";
                z-index:-1;
                background-image:url(background-image.jpg);
                background-position:center;
                background-size:cover;
                // Add this unless you compile your LESS using a preprocessor which adds vendor prefixes //
                -webkit-background-size:cover;
            }
        }
    }
}

why does CSS background-size: cover not work in portrait mode on iOS?

5 Answers5

Linked