CSS background-position ne fonctionne pas dans le navigateur Safari Mobile (iPhone/iPad)

J'ai un problème avec background-position dans le navigateur safari mobile. Il fonctionne très bien sur d'autres navigateurs de bureau, mais pas sur l'iPhone ou l'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;
}

À la fois "background_top.png" et "background_bottom.png" sont allées trop loin vers la gauche. J'ai googlé autour, et aussi loin que je peux dire, background-position EST pris en charge dans le navigateur safari mobile. J'ai aussi essayé toutes les combinaisons de mots-clés ("top", "centre", etc.), px, et %. Toutes les pensées?

Merci!

Mise à jour: voici le balisage de l' .fichier html qui affiche le design & 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 d'arrière-plan très large (~2000px) de manière à prendre de la place sur tout type de navigateur.

P. S. je sais qu'il y a probablement un peu plus efficace CSS raccourcis j'ai pu utiliser, mais pour l'instant j'aime bien avoir le code organisés comme je l'ai visibilité.

Pouvez-vous inclure le balisage ainsi? Peut-être que le problème se trouve avec le balisage.
Ok j'ai mis à jour avec un peu plus de code
Hey vous avez obtenu ce que ça marche? Merci de partager du code.

OriginalL'auteur Nick | 2010-07-06

L'iPhone/navigateur Webkit ne peut pas le centre d'aligner les images d'arrière-plan lorsqu'il est placé dans la balise body. La seule façon de contourner cela est d'enlever l'image de fond de votre balise body et utiliser un DIV 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>

OriginalL'auteur Jimbola

4

Apparemment, quand vous "scroll" sur un iPhone /iPad, vous n'êtes pas défilement de la page, de la même manière que vous le faites dans un navigateur de bureau. Ce que vous faites est plus comme le déplacement de l'ensemble de la page dans une fenêtre. (Je suis sûr que quelqu'un va me corriger si je suis en utilisant le mauvais terminologie ici.)

Cela signifie que background-position: fixed est toujours "pris en charge", mais n'a pas d'effet réel, depuis la page entière est en mouvement dans la fenêtre d'affichage plutôt que le contenu de la page défilement à l'intérieur de la page.

Avez-vous mélanger background-position et background-attachment?

OriginalL'auteur Squig
4

Il va travailler avec
```
background-position-x: 50%;
background-position-y: 0%;
```
et toujours ajouter
```
background-position: center top;
```
pour les autres navigateurs.

OriginalL'auteur leymannx

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;
}

Juste veiller à ce qu'aucune partie de votre contenu va à l'intérieur de la div sinon l'ensemble de la page sera fixé avec pas de défilement.

OriginalL'auteur lg365

0

J'ai ce problème et je suis de l'aborder en se débarrassant de mon pied de page fixe à l'aide d'un style séparée comme indiqué ici: Comment cibler les CSS pour l'iPad, mais exclure Safari 4 bureau à l'aide d'une requête de média?

OriginalL'auteur Syntax Error
-1

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.

downvoting ce depuis l'URL n'est plus valide.

OriginalL'auteur s1mm0t

Vous devez vous connecter pour publier un commentaire.