Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 689
frequent Avatar asked Sep 26 '12 10:09

frequent


People also ask

How do I make the background image fit my screen size in CSS?

Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.

What is the result of setting a background image size to cover?

If the background-size is contain or cover : While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.

Why is my background not showing up CSS?

Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.


1 Answers

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.

like image 102
frequent Avatar answered Sep 19 '22 21:09

frequent