background: fixed no repeat not working on mobile

Question

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; } 

Answer 1

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.

Answer 2

I had a very simple solution for this, after struggling with all the methods of fixing this.

i had the problem on my mobile IOS devices.

css (desktop)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap { background-size: auto; background-attachment: fixed; }  .widget-wrap { background-attachment: scroll; } 

Then i overwrite it with media query removing "fixed" as background attachment.

css (mobile)

@media (max-width: 767px) { #ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {      background-attachment: initial;  } } 

initial - Sets this property to its default value. I think because IOS doesn't accept 'fixed' it falls back to a default value it accepts, scroll.

This worked for me on every device. Hope it helps someone else as well.