Results 1 to 1 of 1

Thread: background-size: cover does not work in iPhone & Co

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Junior Member
    Join Date
    Jun 2016

    SOLVED: background-size: cover does not work in iPhone & Co


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

    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

    Okay, the simple wonder happens by changing background-attachment: fixed to background-attachment: scroll
    God damn.
    Last edited by Holley; 06-28-2016 at 11:54 AM. Reason: Additional information

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts