background: fixed no repeat not working on mobile

css, html, ios, mobile, safari

Solution

I have found a great solution for fixed backgrounds on mobile devices requiring no JavaScript at all.

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Please be aware of the negative `z-index` value of `-10`. `html` root element default `z-index` is `0`. This value must be the smallest `z-index` to have it as background.

Problem

I am building a webpage where I want the background image to scale to fit the whole screen, maintain aspect ratio and be fixed (so if you scroll down, the background image stays in the same place). I have achieved this in desktop browsers with the CSS below, but it doesn't work on an iPhone or iPad. On those devices the background is too big (it continues below the fold) and if you scroll down far enough, the image will start repeating. Anyone have a fix? THanks! ``` HTML { background: url(photos/2452.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } ```

Original source

Related problems