Fixed Background Images Disappear On Iphone/ Ipad

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 setti

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-ossection {
  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;