Jquery Mobile Android - Fester Vollbild-hintergrund-Bild?

Ich versuche, fügen Sie ein full-screen behoben-hintergrund Bild auf der ersten Seite nur einer jquery mobile app für Android (ich bin auch mit phonegap).

Kurz gesagt, ich möchte das hintergrund Bild fullscreen und fester, während der Inhalt der Seite scrollt von oben zu. Das Hintergrundbild muss auch skalieren, um die Größe der verschiedenen Geräte.

Hier ist was ich habe, so weit... 

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

Mit diesem CSS:

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

Dies offensichtlich nicht funktioniert, so dass jeder Stoß in die richtige Richtung wäre zu schätzen, vielen Dank im Voraus.

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

    Dadurch ändert sich das hintergrund Bild aus dem Standard-Farbverlauf auf ein Bild Ihrer Wahl. Das Hintergrundbild angewendet wird, um die .ui-page Elemente (die pseudo-Seiten), der die ganze Seite umfasst und fixiert, so dass es nicht scrollt mit der Seite.

    Hier ist eine demo: http://jsfiddle.net/kKv4s/

    Dokumentation:

    Hier ist browser-Unterstützung für background-size: http://caniuse.com/#feat=background-img-opts

    Update

    Möchten Sie möglicherweise erstellen Sie Ihre CSS-Regel für die .ui-content element(s) eher als die .ui-page element(s) als gradient-hintergrund für die .ui-content element überlappen hintergrund wir sind das hinzufügen, um die .ui-page element:

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

    Hier ist eine demo: http://jsfiddle.net/kKv4s/1/

    • Hallo Jasper, vielen Dank für deine Hilfe. Dies funktioniert für die Skalierung der bg image für verschiedene Geräte, aber es ist nicht behoben und noch immer scrollt mit der Seite von Inhalten. Versucht, indem "background-attachment: fixed' zu .ui-Seite, aber das scheint nicht, etwas zu tun.. irgendwelche Ideen? Vielen Dank im Voraus.
    • Es bleibt stationär bei mir in Chrome 17. Es macht ein wenig mehr Sinn, erstellen Sie eine CSS-Regel für .ui-content statt .ui-page, den Unterschied sehen Sie hier: jsfiddle.net/kKv4s/1
    • Ja, es sieht aus wie dieses funktioniert in Chrome und Safari, aber leider nicht im FF oder auf meinen Android-Geräten. Auf den mobilen Geräten, es ist fest mit dem oberen Rand des Bildschirms und ist die richtige Breite, aber nach unten scrollen, um den Inhalt unter die Höhe des Bildes zeigt den transparenten hintergrund. Seltsamerweise ist es auch vermasselt einige meiner Elemente der Liste' schriftart-Formatierung (das ist keine große Sache). Werde in diesem ein bisschen mehr und hoffentlich in der Lage zu kommen mit etwas.
    • Funktioniert wie ein Charme!
    InformationsquelleAutor Jasper
  2. 2

    Es ist ein jQuery-plugin, dass macht Vollbild Hintergründe für Ihre website.

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

    Diese option kann besser für Sie arbeiten als CSS, weil es mit javascript, um herauszufinden, welche Größe das Fenster und skaliert das Bild, um es zu passen, ohne Dehnung und Verzerrung der Bild.

    Scheint es auch ziemlich gute Dokumentation auf, wie man es richtig verwenden.

    InformationsquelleAutor josh.fabean
  3. 2

    Sollte Diese Arbeit.

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

    Wenn u get problem, bitte teilen Sie

    InformationsquelleAutor Praveena
  4. 0

    Diese Frage wird nur angezeigt, wenn Sie versuchen, und verwenden Sie einen sich wiederholenden hintergrund-Bild und setzen Sie es fest. anscheinend ist der bug in Android Chrome ist in der Verarbeitung dieser beiden Anweisungen zusammen. So das Update ist ein nicht wiederholendes Hintergrundbild und wird es fix richtig

    InformationsquelleAutor user2680965
Schreibe einen Kommentar