SOLVED: background-size: cover does not work in iPhone & Co
Hej,
I made a mixture of bootstrap, w3.css and my own code to get a full-screen slider.
It works pretty fine on Mac and Safari shows me in responsive mode a perfect slider for all devices..
I even checked in a Samsung Galaxy SII which is pretty old - browsers like ff and chrome work perfect.
Only a very old browser, delivered with Samsung (Safari: 534.30, Engine: WebKit 534.30, Mobile.Android.4.1.2) seems to have the same problem as iPhone (all browsers):
The background-images are not displayed "covered". Only a small section is displayed. The image seems to be much too big.
I tried everything ... it can not be that difficult but I really fail to manage ...
Please if someone can have a look to this url:
http://s.o.m.e.w.h.e.r.e/
Have a look on Desktop and if possible on iPhone. You will quickly recognize the problem.
Sorry for my english, I hope I expressed myself as well as needed.
This is an example (without slider) how it should work - even in mobile screen the middle of the image is well placed in the middle of the viewport:
http://www.w3schools.com/w3css/tryw3...s_parallax.htm
I used min-height: 100% and height: 100% for all divs and
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
Under "salon" I even changed the background-images by css for mobile, making them smaller - the same bad section is displayed...
Thanks a lot
Holley
%EDIT%
Okay, the simple wonder happens by changing background-attachment: fixed to background-attachment: scroll
God damn.