Ich versuche, ein festes Hintergrundbild im Vollbildmodus nur auf die erste Seite einer jquery Mobile App für Android hinzuzufügen (ich verwende auch phonegap).
Kurz gesagt, möchte ich, dass das Hintergrundbild als Vollbild angezeigt und fixiert wird, während der Seiteninhalt darüber scrollt. Das Hintergrundbild muss außerdem auf die Größe verschiedener Geräte skaliert werden.
Hier ist was ich bisher habe ...
%Vor%Mit diesem CSS:
%Vor%Dies funktioniert natürlich nicht, also würde jeder Schritt in die richtige Richtung geschätzt, danke im Voraus.
Ändert das Hintergrundbild vom Standardgradienten in ein Bild Ihrer Wahl. Das Hintergrundbild wird auf die .ui-page -Elemente (die Pseudoseiten) angewendet, deckt die gesamte Seite ab und ist so festgelegt, dass es nicht mit der Seite blättert.
Hier ist eine Demo: Ссылка
Dokumentation:
Hier ist Browser-Unterstützung für background-size : Ссылка
Vielleicht möchten Sie Ihre CSS-Regel für das Element .ui-content und nicht für das Element .ui-page erstellen, da der Hintergrund mit Farbverlauf für das Element .ui-content den Hintergrund, den wir hinzufügen, überlappen kann Das Element .ui-page :
Hier ist eine Demo: Ссылка
Es gibt ein jQuery-Plugin, das Fullscreen-Hintergründe für Ihre Website erstellt.
Diese Option funktioniert möglicherweise besser als CSS, da JavaScript verwendet wird, um herauszufinden, wie groß das Fenster ist und skaliert das Bild so, dass es passt, ohne das Bild zu strecken und zu verzerren.
Es scheint auch ziemlich gute Dokumentation darüber zu haben, wie man es richtig benutzt.
Dieses Problem tritt nur auf, wenn Sie versuchen, ein sich wiederholendes Hintergrundbild zu verwenden und es ebenfalls auf "Fixed" zu setzen. Offensichtlich verarbeitet der Fehler in Android Chrome diese beiden Anweisungen zusammen. Die Lösung besteht also darin, ein sich nicht wiederholendes Hintergrundbild zu verwenden, und es wird korrekt korrigiert
Tags und Links css css3 jquery-mobile fixed background