Fixed cover sized background image with CSS which works on iOS and other mobile devices
HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md Fix broken links Oct 30, 2017
index-wrong.html Fix broken links Oct 30, 2017
index.html Fix broken links Oct 30, 2017

README.md

Making fixed cover sized background images work on mobile devices

In iOS a fixed cover background is handled using the whole document height instead of using only the viewport's height.

Error

Example of an error: erroneous working

This will be stretched as big as the document's height, so the background image will displayed zoomed:

body {
      background: url(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Fix

Solution: fixed with CSS

If you make the element itself (body:after) fixed, this code works like a charm, by using only one CSS rule:

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(https://newevolutiondesigns.com/images/freebies/nature-hd-background-9.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

Further info

More info: Stackoverflow: Background-image size cover not working on IOS

Live demo of the solution: Doklist.com, Doklist.com.br