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.
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.