J'essaie d'ajouter une image de fond fixe en plein écran à la première page seulement d'une application mobile jquery pour Android (j'utilise aussi phonegap).Jquery Mobile Android - Image d'arrière-plan fixe en plein écran?

En un mot, je voudrais que l'image d'arrière-plan soit en plein écran et fixe, tandis que le contenu de la page défile au-dessus. L'image d'arrière-plan doit également s'adapter à la taille des différents périphériques.

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

Cela ne fonctionne évidemment pas tout petit coup de pouce dans la bonne direction serait appréciée, merci en avance.

Source

2012-03-26 SilentDesigns

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

Ceci modifie l'image d'arrière-plan du dégradé par défaut en une image de votre choix. L'image d'arrière-plan est appliquée aux éléments .ui-page (les pseudo-pages), couvre la totalité de la page et est fixée de sorte qu'elle ne défile pas avec la page.

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

Documentation:

background-size: https://developer.mozilla.org/en/CSS/background-size
background-attachment: https://developer.mozilla.org/en/CSS/background-attachment

est ici soutien navigateur pour background-size: http://caniuse.com/#feat=background-img-opts

Mise à jour

Vous pouvez créer votre règle CSS pour l'élément .ui-content (s) plutôt que l'élément .ui-page (s) comme gradient arrière-plan pour l'élément .ui-content peut chevaucher l'arrière-plan que nous ajoutons à la élément .ui-page:

.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/

Source

2012-03-26 22:27:10 Jasper

Salut Jasper, merci pour votre aide. Cela fonctionne pour la mise à l'échelle de l'image bg pour différents périphériques, mais elle n'est pas figée et défile toujours avec le contenu de la page. J'ai essayé d'ajouter 'background-attachment: fixed' à .ui-page mais cela ne semble pas faire quoi que ce soit .. des idées? Merci d'avance. – SilentDesigns

@SilentDesigns Il reste stationnaire pour moi dans Chrome 17. Il est plus logique de créer une règle CSS pour '.ui-content' au lieu de' .ui-page', voir la différence ici: http: // jsfiddle. net/kKv4s/1/ – Jasper

Oui, il semble que cela fonctionne dans Chrome et Safari, mais malheureusement pas dans FF ou sur l'un de mes appareils Android. Sur les appareils mobiles, il est fixé en haut de l'écran et la largeur est correcte, mais le fait de faire défiler le contenu au-dessous de la hauteur de l'image révèle l'arrière-plan transparent. Étrangement, cela gâche également certains des éléments de ma liste de mise en forme (ce qui n'est pas une grosse affaire). J'y reviendrai un peu plus et j'espère pouvoir trouver quelque chose. – SilentDesigns

Il y a un plugin jQuery qui fait fonds plein écran pour votre site web.

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

Cette option peut fonctionner mieux pour vous que CSS, car il en utilisant le javascript pour savoir quelle taille est la fenêtre et redimensionne l'image pour l'adapter sans étirement et déformant l'image.

Il semble également avoir une assez bonne documentation sur la façon de l'utiliser correctement.

Source

2012-05-03 16:18:47

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 get autre problème s'il vous plaît partager

Source

2013-04-01 06:21:04 Praveen

Ce problème apparaît uniquement lorsque vous essayez d'utiliser une image d'arrière-plan répétitif et également mis à fixe.Apparemment, le bogue dans Android Chrome consiste à traiter ces deux instructions ensemble. Donc, la solution est d'utiliser une image de fond non répétitive et il va corriger correctement

Source

2013-08-14 04:19:24 user2680965

Jquery Mobile Android - Image d'arrière-plan fixe en plein écran?

Répondre

Mise à jour

Questions connexes