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

Answer 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.

Answer 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.

Answer 4

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

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

Answer 6

I think its problem of browser by using javascript get the device info. then then load the image as per device with different resolution.

Answer 7

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