web-dev-qa-db-fra.com

CSS Fond-Position ne fonctionne pas dans le safari mobile (iPhone / iPad)

J'ai un problème avec la position de fond dans la safari mobile. Cela fonctionne 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;
}

"Fond_top.png" et "fond_bottom.png" sont déplacés trop loin à gauche. Je suis googlé autour de moi et aussi loin que je puisse dire, position de fond ( [~ # ~] est [~ # ~] Pris en charge dans Safari mobile. J'ai également essayé toutes les combinaisons de mots-clés ("haut", "centre", etc.), px et%. Des pensées?

Merci!

Mise à jour: Voici le balisage dans le fichier .html, qui affiche l'amende de conception et de mise en page dans d'autres navigateurs: (J'ai également mis à jour ce qui précède CSS)

<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 sont très larges (à 2000px) afin de prendre de la place sur n'importe quel navigateur de tailles.

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

cssmobilesafaribackground-position
17
Nick

Le navigateur iPhone/WebKit ne peut pas centrer les images d'arrière-plan alignées lorsqu'il est placé dans la balise du corps. Le seul moyen autour de cela est de retirer l'image d'arrière-plan de votre étiquette de votre corps et d'utiliser un DIV supplémentaire en tant que 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>
9
Jimbola

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, c'est plus comme 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 la position de fond: fixe est toujours "prise en charge" mais n'a pas d'effet réel, car la page entière se déplace dans la fenêtre plutôt que le défilement de contenu de la page dans la page.

4
Squig

Créez un ID d'emballage pour placer dans le corps, puis inclure les CSS suivants:

#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 simplement qu'aucun de votre contenu ne va dans la DIV sinon la page entière sera corrigée sans défilement.

2
lg365

J'ai ce problème et je m'adresse à cela en vous débarrassant de mon pied de page fixe à l'aide d'un style distinct mentionné ici: Comment cibler CSS pour iPad mais exclure Safari 4 Desktop à l'aide d'une requête multimédia?

0
Syntax Error