Skip to main content


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
  • sztojka

    After tons of reading, the solution is quite simple:

    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:

          position:fixed; // stretch a fixed position to the whole screen
          height:100vh; // fix for mobile browser address bar appearing disappearing
          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:

    Hope it helps.

Viewing 1 post (of 1 total)