frequent frequent - 10 months ago 63
CSS Question

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

I'm trying to set up a manualy

across devices. I'm doing so by checking for
(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)

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

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


Can I not use CSS
on iOS in portrait-mode?

Thanks for help!


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

Answer Source

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


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.