Ich versuche, ein Vollbild fixiertes Hintergrundbild nur auf der ersten Seite einer jquery Mobile App für Android hinzuzufügen (ich verwende auch phonegap).Jquery Mobile Android - Fixed Vollbild-Hintergrundbild?

Kurz gesagt, ich möchte das Hintergrundbild Vollbild und behoben werden, während der Inhalt der Seite darüber scrollt. Das Hintergrundbild muss außerdem auf die Größe verschiedener Geräte skaliert werden. Hier

ist das, was ich bisher ...

<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 dieser 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 jeden Schub in der richtigen Richtung würde geschätzt, dank im Voraus.

Quelle

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

Dies ändert das Hintergrundbild vom Standardgradienten in ein Bild Ihrer Wahl. Das Hintergrundbild wird auf die Elemente .ui-page (die Pseudoseiten) angewendet, deckt die gesamte Seite ab und ist so festgelegt, dass es nicht mit der Seite blättert. Hier

ist eine Demo: http://jsfiddle.net/kKv4s/

Dokumentation:

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

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

aktualisieren

Vielleicht möchten Sie Ihre CSS-Regel für das .ui-content Element (e) anstelle der .ui-page Element (e) als Gradient-Hintergrund für das .ui-content Element erstellen können den Hintergrund überlappen wir das sind das Hinzufügen .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/

Quelle

2012-03-26 22:27:10 Jasper

Hallo Jasper, danke für deine Hilfe. Dies funktioniert, um das BG-Bild für verschiedene Geräte zu skalieren, aber es ist nicht fixiert und scrollt immer noch mit dem Seiteninhalt. Versucht, 'Hintergrund-Anhang: behoben' zu .ui-Seite, aber das scheint nichts zu tun .. irgendwelche Ideen? Danke im Voraus. – SilentDesigns

@SilentDesigns Es bleibt für mich in Chrome 17 stationär. Es ist ein wenig sinnvoller, eine CSS-Regel für '.ui-content' anstatt für' .ui-page' zu erstellen, siehe den Unterschied hier: http: // jsfiddle. net/kKv4s/1/ – Jasper

Ja, es sieht so aus, als ob dies in Chrome und Safari funktioniert, aber leider nicht in FF oder auf einem meiner Android-Geräte. Auf den mobilen Geräten ist es am oberen Bildschirmrand fixiert und hat die richtige Breite. Wenn Sie jedoch bis unter die Bildhöhe scrollen, wird der transparente Hintergrund sichtbar. Seltsamerweise werden auch einige Schriftformatierungen meiner Listenobjekte durcheinander gebracht (was keine große Sache ist). Werde das ein bisschen genauer anschauen und mir hoffentlich etwas einfallen lassen. – SilentDesigns

Es ist eine jQuery-Plugin, das für Ihre Website Vollbild-Hintergründe macht.

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

Diese Option besser für Sie als CSS kann funktionieren, weil es mit Hilfe von Javascript, um herauszufinden, welche Größe des Fenster und skaliert das Bild, um es zu passen, ohne Dehnung und das Bild zu verzerren.

Es scheint auch ziemlich gute Dokumentation zu haben, wie man es richtig benutzt.

Quelle

2012-05-03 16:18:47

Dies sollte funktionieren.

 #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 weiteres Problem erhalten Sie erscheint

Quelle

2013-04-01 06:21:04 Praveen

Dieses Problem teilen nur, wenn Sie versuchen, ein sich wiederholendes Hintergrundbild verwenden und es auch fixiert.Offensichtlich verarbeitet der Fehler in Android Chrome diese beiden Anweisungen zusammen. Die Lösung ist also, ein sich nicht wiederholendes Hintergrundbild zu verwenden und es wird korrekt repariert.

Quelle

2013-08-14 04:19:24 user2680965

Jquery Mobile Android - Fixed Vollbild-Hintergrundbild?

Antwort

aktualisieren

Verwandte Themen