L'arrière-plan fixe les images disparaissent sur iPhone/ iPad

Je vais avoir des problèmes avec background-image. Mon site avait l'air bien sur les appareils Android, puis j'ai découvert que les iPhones et les iPads n'aime pas background-size: cover.

J'ai fixé ce, par la mise en background-size: 100%.

Sur iPhone simulateurs sur le web, le site a l'air tout à fait OK, mais dès que le test du site sur un vrai iPhone (iOS 9.3), les images de fond ne sont pas affichés.

L'image d'en-tête de charges, cette image est utilisée comme arrière-plan plus bas sur le site, il s'affiche aussi.
L'autre image de droite ci-dessus, le seul chargé de fond commence à charger, mais alors, semble l'avoir abandonnée pour une raison quelconque.

La taille des images est: 1 920 x 1 080.

Le site: http://www.unterwasserfotografie-thomas-uhl.de/

Mise à JOUR:

J'ai essayé Aziz solution à partir de ci-dessous.
Jouer avec background-size:auto 100% rend les images ont l'air mieux sur le smartphone, mais ils ne sont pas chargés sur mobile appareils apple.
Toutefois, si background-size: cover est ensemble, tous les milieux sont à consommer, le problème, c'est que seule une petite partie de l'image est affichée (en haut à droite de l'image?!) et cette partie est assez floue (qui ressemble à un zoom avant).
Comme je n'ai pas changer quoi que ce soit que set background-size:cover pour background-size:100% auto, je ne peux pas croire, que les images se sont empilés les uns sur les autres.

Au moment où j'ai mis le background-size:100% nouveau, ce qui semble la meilleure sur les périphériques de Bureau et est ok pour l'instant pour les appareils mobiles, je ne vais pas commencer à s'inquiéter à propos de la mise en page aussi longtemps que les décors ne sont pas chargés correctement.

Je comprends, que background-size: 100% auto n'est pas la plus belle façon pour les décors et est-ce vraiment envisager de solution 1. Ce que je ne comprends pas c'est pourquoi il y a un seul arrière-plan en cours de chargement à tous, lors du chargement du site sur un iPhone. N'background-position: center simplement empiler tous les milieux à la même position sur l'écran, de sorte que je ne peux voir que le dernier en date est celui qui a été chargé? Souvenez-vous: Il y a environ 6 horizons à tous sur le site, mais un seul d'entre eux est indiqué, c'est la seule qui a son image dans l'en-tête ainsi.

Je vous remercie pour votre soutien, je vais mettre un bounty à cette question car je suis vraiment désespéré sur ce problème.

OriginalL'auteur christian | 2016-04-18

  1. 2

    Malheureusement, vous ne pouvez pas utiliser l'effet de parallaxe de cette façon dans les appareils iOS comme ils ne soutiennent pas vraiment background-attachement règle.

    Si vous voulez perdre cet effet seulement en iOS, vous pouvez utiliser un agent utilisateur de détecter l'appareil et ajouter une classe à l' corps.

    Exemple:

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

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

    De référence de la détection de l'iOS via les agents d'utilisateur: Moyen Simple d'identifier les utilisateur iOS agent de jQuery si/puis faire une déclaration?

    De cette façon, avec ce code JS, vous pouvez appliquer le code CSS suivant:

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

    J'ai utilisé important comme je l'ai seulement utilisé un sélecteur, afin de prendre la priorité de l'actuel code.

    Cette travaillé dans l'iPhone 6s Plus.

    OriginalL'auteur Ardian

  2. 1

    Ajouter ce code dans votre image d'arrière-plan css : background-size :100% 100%;

    OriginalL'auteur Under Taker

  3. 1

    essayer cette les choses faciles pour le navigateur croix fond de la taille de la couverture. Ils aiment arrière-plan de la taille de la couverture aussi, mais avec des moyens différents 🙂

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

    OriginalL'auteur Welyanto

  4. 1

    Je pense que son problème de navigateur à l'aide de javascript obtenir les infos sur l'appareil. puis ensuite charger l'image par l'appareil avec une résolution différente.

    OriginalL'auteur vjking9