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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With