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.

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

Solution 2

Your background-size sets a single value - width. That translates into background-size: 100% auto where the height is automatic and preserves aspect ratio. Coupling that with background-position of center will cause the background to be in the middle of viewport with whitespace around it.

Demonstration:

jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/

---

Solution 1: Auto-width instead of auto height

By default background-size: 100% means the width is 100% and height is automatic. This is good for wide resolutions or devices in landscape orientation. However, when the device is in portrait, there will be a lot of vertical whitespace. You could use that logic but switch it so that height is 100% and width is auto by applying background-size: auto 100%;

div {
  height:400px;
  border:1px solid red;
  background: url(http://lorempixel.com/970/540) fixed no-repeat center;
  background-size:auto 100%;
}

div:nth-of-type(2) {
  background-image: url(http://lorempixel.com/960/541);
}

p {
  background:#FFF;
  padding:3em;
  margin: 0;
}

<div></div>
<p>Lorem Ipsum</p>
<div></div>

jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/4/

It's probably best to apply that rule within a @media query to target landscape/mobile devices.

---

Solution 2: Stretched background

You could solve this by applying background-size: 100% 100% to stretch the background across the viewport and remove whitespace. Though the background will lose its aspect ratio and weird stretches may occur.

div {
  height:400px;
  border:1px solid red;
  background: url(http://lorempixel.com/970/540) fixed no-repeat center;
  background-size:100% 100%;
}

div:nth-of-type(2) {
  background-image: url(http://lorempixel.com/960/541);
}

p {
  background:#FFF;
  padding:3em;
  margin: 0;
}

<div></div>
<p>Lorem Ipsum</p>
<div></div>

jsFiddle: https://jsfiddle.net/azizn/0dy8dL7z/2/

Alternatively could remove the background-position or the fixed attachment or simply use img tags instead of background.

Each solution has its own drawbacks, so consider the one that better suits your project.

Solution 3

Unfortunately you can't use the parallax effect this way in iOS devices as they don't really support background-attachement rule.

If you want to loose this effect only in iOS, you can use an user agent to detect the device and add a class to the body.

Example:

var _isOS = navigator.userAgent.match(/(iPod|iPhone|iPad)/);

if (_isOS) {
  $('body').addClass('is-os');
} 

Reference of detecting iOS via user agents: Simple way to identify iOS user agent in a jQuery if/then statement?

This way with that JS code, you can apply the following CSS:

body.is-os section {
  background-attachment: initial !important;
  background-size: cover !important;
}

I used important as I only used one selector, in order to take the priority of the current code.

This worked in iPhone 6s Plus.

Solution 4

Add this code in your background image css : background-size :100% 100%;

Solution 5

try this easy things for cross browser background size cover. They love background size cover also, but with a different ways :)

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

View more solutions

Comments

[christian]

Thank you for your detailed answer. 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.

[Aziz]

They are probably stacked under each other, try to remove all content and just keep the background divs and test it. Unfortunately I do not have any Apple devices. You can try .container {display: none} or disable the fixed attachment just to make sure the images are indeed loaded.

[Frits]

You could also change the attachment to fixed instead of initial, however it's not supported in the built-in android browser: caniuse.com/#feat=background-attachment

[christian]

I've tried this suggestion, but the backgrounds are still not loaded. I've tried using smaller images <200kb but it still did not work. I'm going crazy on this one.

[Frits]

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 so that you have background-image:url(...) and background-position: center center; etc.

[christian]

ok this seems to be the last chance I have. Could you please tell me what seems to be the correct form for the following code? .bg-1 { background: url(../Dateien/sharkGround1920.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100%; }

[Frits]

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

[christian]

ok thats what I get then: bilder-upload.eu/show.php?file=5a111f-1461684502.png when setting the size from cover to 100%, then the image is displayed, but 2 times right beneath one another. Adding no repeat shoul help, but i would like to keep the cover instead of 100%

[christian]

By the way feel free to post your answer as a detailed version, as this solved my problem at least far enough for me to have something to work with :) (I cant give you the bounty on your comment)

[Frits]

cool - thank you very much! I have edited my original answer to add what we discussed in the comments!