web-dev-qa-db-fra.com

Redimensionnement incorrect des images d'arrière-plan CSS sur iPad et iPhone.

L'image d'arrière-plan de mon site est bien redimensionnée dans Chrome et Safari avec background-size: cover, mais lorsque je vais tester mon site Web sur un ipad ou un iphone, l'image d'arrière-plan CSS est vraiment agrandie et a l'air horrible. J'ai lu beaucoup d'autres questions sur ce sujet et aucune n'a résolu mon problème. 

HTML

<div class="background"> 

</div><!--background-->

.background n'a pas de conteneur et correspond à 100% de la largeur de l'écran.

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
htmlioscss
21
chap

J'ai eu le même problème, j'ai utilisé SCROLL au lieu de FIXED.

background-attachment:scroll;
50
Etienne Dupuis

Apparemment, le Safari de l'iPad est sous-échantillonné images au-dessus du seuil de 1024px. J'avais essayé d'utiliser scroll au lieu de fixed mais cela n'a pas réussi. Autres astuces n'a pas fonctionné pour moi non plus.

J'ai résolu ce problème en scindant mon image 1600 × 1600, trop grande au départ, en deux images. Grâce à cela, j'ai pu utiliser deux images de taille 1024px et une lisibilité encore meilleure qu'auparavant.

Peut-être qu'une solution de ce genre fonctionnerait pour vous aussi.

0
WoodrowShigeru