Sto cercando di aggiungere un'immagine di sfondo fissa a schermo intero solo alla prima pagina di un'app mobile jquery per Android (sto anche utilizzando PhoneGap).Jquery Mobile Android - Corretto l'immagine di sfondo a schermo intero?

In breve, vorrei che l'immagine di sfondo fosse a schermo intero e fissa, mentre il contenuto della pagina scorre sopra di esso. Anche l'immagine di sfondo deve essere ridimensionata in base alle dimensioni dei diversi dispositivi.

Ecco quello che ho finora ...

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

Con questo CSS:

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

Questo ovviamente non funziona in modo che qualsiasi spinta nella giusta direzione sarebbe apprezzato, grazie in anticipo.

fonte

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

Cambia l'immagine di sfondo dal gradiente di default a un'immagine di tua scelta. L'immagine di sfondo viene applicata agli elementi .ui-page (le pseudo-pagine), copre l'intera pagina ed è fissa in modo che non scorra con la pagina.

Ecco una demo: http://jsfiddle.net/kKv4s/

Documentazione:

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

Qui è il supporto del browser per background-size: http://caniuse.com/#feat=background-img-opts

Aggiornamento

È possibile creare la regola CSS per l'elemento (s) .ui-content piuttosto che l'elemento .ui-page (s) come il gradiente di sfondo per l'elemento .ui-content possono sovrapporsi sullo sfondo stiamo aggiungendo al .ui-page elemento:

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

Ecco una demo: http://jsfiddle.net/kKv4s/1/

fonte

2012-03-26 22:27:10 Jasper

Ciao Jasper, grazie per il tuo aiuto. Questo funziona per ridimensionare l'immagine bg per diversi dispositivi, ma non è fissa e continua a scorrere con il contenuto della pagina. Ho provato ad aggiungere "background-attachment: fixed" alla .ui-page ma non sembra che faccia nulla ... qualche idea? Grazie in anticipo. – SilentDesigns

@SilentDesigns Rimane fisso per me in Chrome 17. Ha un po 'più senso creare una regola CSS per '.ui-content' invece di' .ui-page', vedere la differenza qui: http: // jsfiddle. net/kKv4s/1/ – Jasper

Sì, sembra che funzioni in Chrome e Safari, ma sfortunatamente non in FF o su nessuno dei miei dispositivi Android. Sui dispositivi mobili è fissato nella parte superiore dello schermo ed è della larghezza corretta, ma lo scorrimento verso il basso fino al contenuto sotto l'altezza dell'immagine rivela lo sfondo trasparente. Stranamente, inoltre, incasina la formattazione dei caratteri di alcuni dei miei elenchi (che non è un grosso problema). Guarderemo un po 'di più e speriamo di riuscire a trovare qualcosa. – SilentDesigns

V'è un plugin jQuery che rende sfondi a schermo intero per il tuo sito.

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

Questa opzione può lavorare meglio per voi che i CSS, perché utilizzando JavaScript per capire che dimensione la finestra è e scale l'immagine per adattarsi senza stretching e distorcere l'immagine.

Sembra anche avere una buona documentazione su come usarlo correttamente.

fonte

2012-05-03 16:18:47

Questo dovrebbe funzionare.

 #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" />

Se u ottenere ulteriore problema si prega di condividere

fonte

2013-04-01 06:21:04 Praveen

Questo problema appare solo quando si cerca e si utilizza un'immagine di sfondo ripetuta e anche impostarlo a fisso.a quanto pare il bug in Android Chrome è in elaborazione queste due istruzioni insieme. Quindi la soluzione è usare un'immagine di sfondo non ripetuta e si risolverà correttamente

fonte

2013-08-14 04:19:24 user2680965

Jquery Mobile Android - Corretto l'immagine di sfondo a schermo intero?

risposta

Aggiornamento

Problemi correlati