web-dev-qa-db-fra.com

Image de fond fixe avec ios7

J'ai un projet que j'utilise l'image d'arrière-plan fixe. Cela fonctionne très bien sur tout sauf sur iOS 7. Sur l'ipad, l'image d'arrière-plan est agrandie et floue. Voici le code CSS que j'utilise -

.header {
  display: table;
  height: 100%;
  width: 100%;
  position: relative;
  color: #fff;
  background: url(../images/boston2.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }

voici un lien vers la page en direct - www.wdeanmedical.com

Qu'est-ce que je rate?

cssbackgroundios7cover
34
user2560895

L'utilisation de background-attachment: fixed avec background-size: cover provoque des problèmes sur la plupart des navigateurs mobiles (comme vous l'avez vu). Vous pouvez essayer d'utiliser background-attachment: scroll. Cela ne donnera pas l'effet désiré, mais vous verrez au moins les images. Vous pouvez utiliser une requête multimédia ou deux pour la limiter aux périphériques tablettes ou téléphones en utilisant @media screen and (max-device-width: 1024px){}.

OR

Vous pouvez utiliser background-position: scroll et inclure du javascript qui maintiendra l'image à la position de défilement (en la gardant en haut de la fenêtre): DEMO

39
brouxhaha

J'ai eu une très simple solution pour cela, après avoir lutté avec toutes les méthodes pour résoudre ce problème.

j'ai eu le problème sur mes appareils mobiles IOS.

css (bureau)

#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {
background-size: auto;
background-attachment: fixed;
}

.widget-wrap {
background-attachment: scroll;
}

Ensuite, je l’écrase avec une requête de média supprimant "corrigée" comme pièce jointe en arrière-plan.

css (mobile)

/*-------- iPads (portrait and landscape) --------*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
#ci-hero-11 .widget-wrap , #ci-hero-12 .widget-wrap {

    background-attachment: initial;

}
}

initial - Définit cette propriété sur sa valeur par défaut. Je pense que, parce que IOS n'accepte pas 'fixe', il revient à une valeur par défaut qu'il accepte, faites défiler.

Cela a fonctionné pour moi sur chaque appareil. J'espère que cela aide aussi quelqu'un d'autre.

9
Ylama

Essaye ça:

HTML

<div class="container">
  <div class="fixed-img"></div>
  <h1>Words that go over text</h1>
</div>

css

.fixed-img {
  position: fixed;
  z-index: -1;
}

JSFiddle exemple

Exemple live

5
Cruz Nunez

Sachez qu’il s’agit d’un ancien fil de discussion mais souhaitait fournir une solution mise à jour qui s’appuie sur celle de @ Cruz-Nunez.

S'appuyer sur la taille de la fenêtre est susceptible d'échouer. Par exemple, s’appuyer sur une fenêtre d’affichage de 767px ne fonctionnera pas sur les iPads, et l’augmentation de la taille annule les avantages de cette approche.

Au lieu de cela, vous pouvez vérifier si le périphérique dispose de capacités de survol, et si ce n'est pas le cas, remplacez comme ceci:

@media (hover: none) {
   .homeHero {
       background-attachment: initial;
   }
}

Vous pouvez également vérifier si le périphérique dispose d'un pointeur de parcours (par exemple, un doigt) au lieu d'un indicateur fin (par exemple, une souris):

@media (pointer: coarse) { ... }
4
Tim
.header {background-position: -99999px -99999px;}
.header:before {content: ""; background-image: inherit; position: fixed; top: 0; left: 0; height: 100vh; width: 100%; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover; background-size: cover !important; z-index: -1;}

Je pense avoir obtenu l'effet souhaité sur mon propre site en utilisant ce qui précède avec un correctif permettant à 100vh de fonctionner sur les appareils iOS.

2
MugenFTW

Combinaison des idées de @brouxhaha et de @yllama: utilisez une requête multimédia qui cible iOS, qui se trouve à ce SO message ,

background-attachment: scroll;

Ainsi, l’image d’arrière-plan fixe apparaît pour les appareils mobiles non-iOS et tous les autres appareils.

.widget-wrap {
   background-attachment: fixed;
   ...
   ...
}

@supports (-webkit-overflow-scrolling: touch) {
  .widget-wrap {
  background-attachment: scroll;
  }
}
0
Osprey Eagle