CSS background-position ne fonctionne pas en Safari Mobile (iPhone / iPad)
j'ai un problème avec l'arrière-plan-position dans le safari mobile. Il fonctionne très bien sur d'autres navigateurs de bureau, mais pas sur iPhone ou 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;
}
les Deux "background_top.png " et " background_bottom.png" sont déplacés trop à gauche. J'ai cherché sur Google, et pour autant que je puisse dire, background-position prise en charge en safari mobile. J'ai aussi essayé toutes les combinaisons de mots-clés ("top", "centre", etc.), px, et %. Tout pensées?
Merci!
mise à jour: voici le balisage dans le .fichier html qui affiche la conception et de la mise en page fine dans les autres navigateurs: (j'ai aussi mis à jour le css en 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) de façon à occuper de la place sur n'importe quel navigateur de taille.
<!-Je sais qu'il y a probablement quelques raccourcis CSS plus efficaces que je pourrais utiliser, mais pour l'instant j'aime avoir le code organisé comme je l'ai pour la visibilité.6 réponses
le navigateur iPhone/Webkit ne peut pas centrer les images d'arrière-plan alignées lorsqu'il est placé dans la balise body. La seule façon de contourner cela est de supprimer l'image de fond de votre étiquette corporelle et d'utiliser un DIV supplémentaire comme un 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>
apparemment, quand vous "faites défiler" sur un iPhone / iPad, vous ne faites pas défiler la page comme vous le faites sur un navigateur de bureau. Ce que vous faites est plus comme déplacer la page entière dans un viewport. (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 se déplace à l'intérieur du viewport plutôt que le contenu de la page défilant à l'intérieur du page.
ça va marcher avec
background-position-x: 50%;
background-position-y: 0%;
et toujours ajouter
background-position: center top;
pour les autres navigateurs.
Créer un wrapper ID de placer dans le corps, puis d'inclure le code 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;
}
assurez-vous juste qu'aucun de votre contenu va dans la div sinon la page entière sera corrigée sans défilement.
j'ai ce problème et je l'aborde en me débarrassant de mon pied de page fixe en utilisant un style séparé comme mentionné ici: comment cibler CSS pour iPad mais exclure Safari 4 desktop en utilisant une requête multimédia?
Cela pourrait être causé par les dimensions de votre sprite(s). 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.