Jquery Mobile Android - correction d'un plein écran de l'image de fond?

J'essaye d'ajouter un plein écran de l'image de fond fixe à la première page de jquery mobile app pour Android (je suis aussi à l'aide de phonegap).

En un mot, je voudrais que l'image d'arrière-plan pour être en plein écran et fixe, tandis que le contenu de la page défile au-dessus d'elle. L'image d'arrière-plan doit également à l'échelle à la taille des différents dispositifs.

Voici ce que j'ai jusqu'à présent... 

<div data-role="page" id="unit-list" data-theme="a"> 

<div id="background">

<div data-role="header" data-theme="b">
    <h1>Header</h1>
</div><!-- /header -->

<div data-role="content" data-theme="a">    

    <ul data-role="listview" data-theme="none">
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>

</div><!-- /content -->

</div><!-- /background -->

 </div> <!-- /page -->

Avec ce CSS:

#background {
    background: url(../images/background.png);
    width: 100% !important;
    height: auto !important;
    background-repeat: no-repeat;
    position: absolute;
    z-index: -1;
}

De toute évidence, cela ne fonctionne pas ainsi, tout coup de pouce dans la bonne direction serait appréciée, merci d'avance.

OriginalL'auteur SilentDesigns | 2012-03-26

  1. 9
    .ui-page {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}​

    Cela change l'image de fond par défaut du gradient d'une image de votre choix. L'image de fond est appliquée à la .ui-page éléments (le pseudo-pages), couvre l'ensemble de la page, et est fixé afin de ne pas faire défiler la page.

    Voici une démo: http://jsfiddle.net/kKv4s/

    Documentation:

    Ici est la prise en charge du navigateur pour background-size: http://caniuse.com/#feat=background-img-opts

    Mise à jour

    Vous pouvez créer votre règle CSS pour la .ui-content élément(s) plutôt que de la .ui-page élément(s) que le dégradé d'arrière-plan pour le .ui-content élément peuvent se superposer à l'arrière-plan, nous allons ajouter à la .ui-page élément:

    .ui-content {
    background : transparent url(http://www.nasa.gov/images/content/312934main_image_1283-946.jpg) 0 0 no-repeat fixed !important;
    background-size : cover;
}​

    Voici une démo: http://jsfiddle.net/kKv4s/1/

    Salut Jasper, merci pour votre aide. Cela fonctionne pour la mise à l'échelle de la bg image pour différents appareils, mais il n'est pas fixé et défile toujours avec le contenu de la page. Essayé d'ajouter 'background-attachment: fixed".interface utilisateur-page, mais qui ne semble pas faire quoi que ce soit.. des idées? Merci à l'avance.
    Il reste stationnaire pour moi en Chrome 17. Il fait un peu plus de sens pour créer une règle CSS pour .ui-content au lieu de .ui-page, voir la différence ici: jsfiddle.net/kKv4s/1
    Oui, c'est comme cela fonctionne dans Chrome et Safari, mais malheureusement pas dans FF ou sur aucun de mes appareils Android. Sur les appareils mobiles, il est fixé à la partie supérieure de l'écran et la largeur correcte, mais le défilement vers le bas pour le contenu en dessous de la hauteur de l'image révèle l'arrière-plan transparent. Étrangement, il a également les dégâts de certains de mes éléments de la liste de la " mise en forme de caractères (ce qui n'est pas une grosse affaire). Va regarder cela d'un peu plus et nous espérons être en mesure de venir avec quelque chose.
    Fonctionne comme un charme!

    OriginalL'auteur Jasper

  2. 2

    Il y a un plugin jQuery qui fait plein écran, arrière-plans pour votre site web.

    http://www.buildinternet.com/project/supersized/

    Cette option peut fonctionner mieux pour vous que les CSS parce qu'il l'utilisation de javascript pour déterminer la taille de la fenêtre est et à l'échelle l'image pour l'adapter sans étirement et de distorsion de l'image.

    Il semble aussi avoir assez bonne documentation sur comment l'utiliser correctement.

    OriginalL'auteur josh.fabean

  3. 2

    Cela Devrait Fonctionner.

         #background {
        background-image: url('grey.png');
        background-position:center; 
        background-repeat: no-repeat;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        z-index: 0; 
         }

       Html:---
       <body>
       <img id="background" />

    Si u obtenir de plus amples problème s'il vous plaît partager

    OriginalL'auteur Praveena

  4. 0

    Ce problème apparaît uniquement lorsque vous essayez d'utiliser la répétition d'une image de fond et aussi le fixe. apparemment le bug sur Android Chrome est dans le traitement de ces deux instructions. Donc la solution est d'utiliser un non-répétition de l'image de fond et il va corriger correctement

    OriginalL'auteur user2680965