Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • sztojka
    Participant

    After tons of reading, the solution is quite simple: http://stackoverflow.com/questions/24154666/background-image-size-cover-not-working-on-ios/43058483#43058483

    The secret is to make the element itself fixed and not the background image (because iOS uses the whole body height for fixed cover sized background images, and that is why they may seemed oddly stretched), and cover sizing is working like a charm then.

    Also don’t forget to use 100vh height, since full body stretching (top:0,bottom:0,left:0,right:0), would work strangely on mobile browsers thanks to the hiding and reappearing address bar.

    Here is the code if you don’t want to check out the original stackoverflow post:

    body:after{
          content:"";
          position:fixed; // stretch a fixed position to the whole screen
          top:0;
          height:100vh; // fix for mobile browser address bar appearing disappearing
          left:0;
          right:0;
          z-index:-1; // needed to keep in the background
          background: url(/img/header2.jpg) center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
    }
    

    And if you want to test it live, I use it in production here: https://www.doklist.com/

    Hope it helps.

Viewing 1 post (of 1 total)