Fixed background images disappear on iPhone/ iPad

Question

I'm having issues with background-image. My website looked good on Android devices, then I found out that iPhones and iPads don't like background-size: cover.

I fixed this by setting background-size: 100%.

On iPhone simulators on the web, the site looks quite OK, but as soon as testing the site on a real iPhone (iOS 9.3), the background images are not shown.

The header image loads, this image is used as a background further down on the site, it gets displayed there, too. The other image right above the only loaded background starts loading, but then seems to get aborted for some reason.

The size of the images is: 1920x1080.

The website: http://www.unterwasserfotografie-thomas-uhl.de/

UPDATE:

I've tried Aziz' solution from below. Playing around with background-size:auto 100% makes the images look better on the smartphone, but they are not loaded on mobile apple devices. However, if background-size: cover is set, all of the backgrounds are getting loaded, the problem is, that only a small part of the image gets displayed (the right top of the image?!) and this part is quite fuzzy (looks like zoomed in). As I did not change anything than set background-size:cover to background-size:100% auto, I cannot believe, that the images are getting stacked on each other.

At the moment I've set the background-size:100% again, this looks best on Desktop devices and is ok so far for mobile devices, I won't start worrying about the layout as long as the backgrounds are not loaded correctly.

I understand, that background-size: 100% auto is not the nicest way for backgrounds and will definetly consider solution 1. What I do not understand is, why there is only one background being loaded at all, when loading the site on an iPhone. Does background-position: center simply stack all the backgrounds at the same position on the screen, so that I can only see the latest one that has been loaded? Remember: There are about 6 backgrounds at all on the site, but only one of them is shown, its the one that has its image used in the header as well.

Thank you for your support so far, I will set a bounty to this question as I am really getting desperate on this problem.

Answer 1

One of the main problems here is the fact that iOS mobile devices have errors rendering background-size:cover; along with background-attachment:fixed;.

Therefore an easy fix would be to use a media query to change the background-attachment property on mobile (screen width less than 640px):

The CSS:

@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}

By changing the background-attachment property on mobile, you will allow the images to display properly on iOS devices.

---EDIT--- According to this question: stackoverflow.com/questions/18999660/ there seems to be a problem with the shorthand ordering of the background property on iOS.

Maybe try to convert your short hand like this:

.bg-1 { 
  background-image: url(../Dateien/sharkGround1920.jpg); 
  background-size: cover; 
  background-attachment:fixed; 
}