Je fais une application iPhone à l'aide de téléphonesOngap et utilise également JQuery Mobile. Je veux définir une image de fond pour le rôle de données = page div. Dans cette hauteur de la page est égale à l'écran et l'arrière-plan est défini sur la taille de l'écran. Mais la longueur du contenu de la page est beaucoup plus grande que l'écran et l'arrière-plan gris est donc vu après la fin de l'image. Ma question est de savoir s'il y a un moyen de garder l'image de fond fixé et de faire défiler ou de ne déplacer que le contenu de la page et de l'image de fond. Juste pour mentionner que j'ai essayé Fond complet de fond jQuery Pluggin . Son travail sur Android mais pas sur iOS.
Quelqu'un peut-il vous aider? Merci d'avance.
6 Réponses :
Vous recherchez CSS fond-pièce de fond code> propriété.
div[data-role="page"]{
background-attachment: fixed;
}
Il fonctionne à partir de iOS5, si vous utilisez une version plus ancienne de iOS WebKit version utilisée par Safari ne prend pas en charge pièce d'appoint-pièce: fixe
JUICYSCRIPTER a expliqué que la position fixe ne fonctionne que sur iOS5 + et que seule l'utilisation d'une bibliothèque comme iScroll donne le même effet sur iOS4 et ci-dessous.
OK, alors ce que j'ai fait plutôt de créer un élément fixe dans l'élément corporel de la page.
Donc, cela ressemblerait à et pour le CSS, j'ai déclaré ce qui suit: et cela a fait le tour pour moi. J'espère que cela aide (quelqu'un là-bas: p)
Vous pouvez définir votre image d'arrière-plan sur la page JQuery:
Vous pouvez essayer ceci:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
Essayez avec cela, cela fonctionne pour moi.
position:fixed; top:0; left:0; width:100%; height:100%; background: url(../Images/loginBackground.jpg) 0 0 fixed !important; background-size:100% 100%; background-repeat: no-repeat;
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}