Fixed background images disappear on iPhone/ iPad
<p>I'm having issues with <code>background-image</code>. My website looked good on Android devices, then I found out that iPhones and iPads don't like <code>background-size: cover</code>.</p>

<p>I fixed this by setting <code>background-size: 100%</code>.</p>

<p>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.</p>

<p>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.</p>

<p>The size of the images is: 1920x1080.</p>

<p>The website: <a href="http://www.unterwasserfotografie-thomas-uhl.de/" rel="nofollow">http://www.unterwasserfotografie-thomas-uhl.de/</a></p>

<p>UPDATE:</p>

<p>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 <strong>mobile</strong> 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.</p>

<p>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.</p>

<p>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.</p>

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