Comment puis-je définir la position fixe de l'image de Fond en jquery mobile pour l'iPhone app à l'aide de Phonegap

Je suis en train de faire une application iPhone à l'aide de Phonegap & également à l'aide de jquery mobile. Je veux mettre l'image de fond pour les data-role=page div. À cette hauteur de la page est égal à écran & de là, arrière-plan est la taille de l'écran. Mais le contenu de la page longueur est beaucoup plus grande que l'écran & par conséquent, fond gris est vu après l'image complète.
Ma question est de savoir si il existe un moyen afin que nous puissions garder l'image de fond fixe & de défilement ou de déplacer uniquement le contenu de la page & pas d'image de fond.
Juste pour signaler que j'ai essayé pleine taille de l'arrière-plan pluggin jquery. Son travail sur Android mais pas sur iOS.

Quelqu'un peut s'il vous plaît aider? Merci à l'avance.

OriginalL'auteur Sayali | 2012-01-19

  1. 9

    Ok, donc ce que j'ai fait, c'est plutôt de créer un élément fixe à l'intérieur de l'élément de corps de la page.
    Donc, il devrait ressembler à

    <body>
   <div id="background"></div>
    ...
</body>

    Et pour le CSS j'ai déclaré ce qui suit:

        #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
    background-size:contain;
}

    Et cela a fait l'affaire pour moi. Espérons que cela aide (quelqu'un là-bas :P)

    Cela a fonctionné pour moi dans chrome, mais pas iOS.

    OriginalL'auteur Adrian

  2. 3

    Vous à la recherche d' css background-attachment propriété.

    div[data-role="page"]{
  background-attachment: fixed;
}

    Mise à jour:

    background-attachment:fixed est pris en charge à partir de iOS 5, si vous utilisez une version plus ancienne de l'iOS, vous pouvez envisager l'utilisation de iScroll.

    Merci mais cela ne fonctionne pas.
    Il fonctionne à partir de iOS5, si vous utilisez une version plus ancienne de l'iOS version de WebKit utilisé par Safari ne supporte pas background-attachment:fixed
    Ya il fonctionne sur iOS 5. Je veux qu'il fonctionne sur iOS 4.2 ou 4.3
    JuicyScripter a expliqué que la position fixe ne fonctionne que sur iOS5+ et que seule l'aide d'une bibliothèque comme iScroll donnera le même effet sur iOS4 et ci-dessous.

    OriginalL'auteur Juicy Scripter

  3. 0

    vous pouvez essayer ceci:

     .ui-mobile
 .ui-page-active{

 display:block;
 overflow:visible;
 overflow-x:hidden;

 }

    fonctionne très bien pour moi.

    OriginalL'auteur JavaScripter

  4. 0

    Vous pouvez définir votre image de fond à l'jQuery page:

    .ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }

    OriginalL'auteur Manikandan

  5. 0

    Essayez avec cette, ce travail 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;

    OriginalL'auteur Charlo Melgoza Gutierrez

  6. 0
    <body>
   <div id="background"></div>
    ...
</body>

    css:

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

    Le problème est que iOS appareils mobiles ont des erreurs de rendu simultanément background-size:cover; et background-attachment:fixed; de sorte que vous avez à fixer par la @media

    OriginalL'auteur Stan Fad