La position de l'arrière-plan CSS ne fonctionne pas dans Mobile Safari (iPhone/iPad)

J'ai un problème avec la position d'arrière-plan dans un safari mobile. Cela fonctionne bien sur d'autres navigateurs de bureau, mais pas sur iPhone ou iPad.La position de l'arrière-plan CSS ne fonctionne pas dans Mobile Safari (iPhone/iPad)

body { 
background-color: #000000; 
background-image: url('images/background_top.png'); 
background-repeat: no-repeat; 
background-position: center top; 
overflow: auto; 
padding: 0px; 
margin: 0px; 
font-family: "Arial"; 
} 

#header { 
width: 1030px; 
height: 215px; 
margin-left: auto; 
margin-right: auto; 
margin-top: 85px; 
background-image: url('images/header.png'); 
} 

#main-content { 
width: 1000px; 
height: auto; 
margin-left: auto; 
margin-right: auto; 
padding-left: 15px; 
padding-right: 15px; 
padding-top: 15px; 
padding-bottom: 15px; 
background-image: url('images/content_bg.png'); 
background-repeat: repeat-y; 
} 

#footer { 
width: 100%; 
height: 343px; 
background-image: url('images/background_bottom.png'); 
background-position: center; 
background-repeat: no-repeat; 
}

deux "background_top.png" et "background_bottom.png" sont trop décalées vers la gauche. J'ai parcouru, et autant que je sache, la position d'arrière-plan IS pris en charge dans un safari mobile. J'ai également essayé toutes les combinaisons de mots-clés ("top", "center", etc.), px, et%. Des pensées?

Merci!

Mise à jour: voici le balisage dans le fichier .html, qui affiche la conception & mise en page bien dans d'autres navigateurs: (je aussi mis à jour le code CSS ci-dessus)

<html lang="en"> 
<head> 
    <title>Title</title> 
    <link rel="Stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div id="header"></div> 
    <div id="main-content"></div> 
    <div id="footer"></div> 
</body> 
</html>

Les deux images de fond sont très larges (~ 2000px) afin de prendre de la place sur n'importe quel navigateur de taille.

P.S. Je sais qu'il y a probablement quelques raccourcis CSS plus efficaces que je pourrais utiliser, mais pour l'instant j'aime bien que le code soit organisé comme je l'ai pour la visibilité.

Source

2010-07-06 Nick

Pouvez-vous également inclure le balisage? Peut-être que le problème réside dans le balisage. –

Ok, j'ai mis à jour avec un peu plus de code – Nick

@Nick Hey, vous l'avez fonctionné? S'il vous plaît partager le code. –

-1

Cela peut être dû aux dimensions de vos sprites. Voir http://teknocat.org/blog/computer-stuff/web-development/show/6/mobile-safari-background-image-scaling-quirk pour une description complète et des solutions possibles.

Source

2010-11-24 02:32:47 s1mm0t

downvoting car l'URL n'est plus valide. – KenB

Apparemment, lorsque vous "faites défiler" sur un iPhone/iPad, vous ne faites pas défiler la page de la même manière que dans un navigateur de bureau. Ce que vous faites ressemble plus à déplacer la page entière dans une fenêtre. (Je suis sûr que quelqu'un me corrigera si j'utilise la mauvaise terminologie ici.)

Cela signifie que background-position: fixed est toujours "supporté" mais n'a pas d'effet réel, puisque toute la page bouge dans la fenêtre plutôt que le contenu de la page défilant dans la page.

Source

2010-12-06 16:35:50 Squig

J'ai ce problème et je suis le résoudre en se débarrassant de mon pied de page fixe en utilisant un style distinct comme mentionné ici: How to target CSS for iPad but exclude Safari 4 desktop using a media query?

Source

2011-01-19 19:19:01

Le navigateur iPhone/Webkit ne peut pas centrer aligner les images d'arrière-plan lorsqu'il est placé dans la balise body . Le seul moyen de contourner ce problème est de supprimer l'image d'arrière-plan de votre balise body et d'utiliser un DIV supplémentaire comme wrapper.

#wrapper { 
background-color: #000000; 
background-image: url('images/background_top.png'); 
background-repeat: no-repeat; 
background-position: center top; 
overflow: auto; 
} 


<html lang="en"> 
<head> 
    <title>Title</title> 
    <link rel="Stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="header"></div> 
    <div id="main-content"></div> 
    <div id="footer"></div> 
    </div> 
</body> 
</html>

Source

2011-02-27 17:28:57 Jimbola

Il va travailler avec

background-position-x: 50%; 
background-position-y: 0%;

et encore ajouter

background-position: center top;

pour les autres navigateurs.

Source

2013-08-22 11:03:30 leymannx

Créer un code d'emballage pour placer dans le corps, puis d'inclure le CSS suivant:

#background_wrap { 
    z-index: -1; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background-size: cover; 
    background-image: url('../images/compressed/background-mobile.png'); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
}

Juste veiller à ce qu'aucun de votre contenu va dans le div sinon la page entière sera fixé sans défilement.

Source

2015-01-13 09:44:56 lg365

La position de l'arrière-plan CSS ne fonctionne pas dans Mobile Safari (iPhone/iPad)

Répondre

Questions connexes