Wie kann ich einstellen, festen position, Background-image in jquery mobile für iPhone app mit Phonegap

Mache ich eine iPhone-app mit Phonegap & auch unter Verwendung von jquery mobile. Ich möchte hintergrund Bild für data-role=page-div. In dieser Höhe Seite gleich screen & folglich hintergrund eingestellt ist, um die Größe des Bildschirms. Aber der Inhalt der Seite Länge sehr viel größer ist als der Bildschirm & daher der graue hintergrund ist zu sehen, nachdem Bild vervollständigt.
Meine Frage ist, ob es einen Weg gibt, so dass wir halten können das Hintergrundbild fixed & scrollen oder verschieben Sie nur die Inhalte der Seite & nicht im hintergrund.
Nur um zu erwähnen, ich habe versucht full-size-hintergrund, jquery-das Stopfen. Seine arbeiten auf Android aber nicht für iOS.

Kann bitte jemand helfen? Vielen Dank im Voraus.

InformationsquelleAutor Sayali | 2012-01-19
  1. 9

    Ok, also, was ich Tat, war vielmehr zu erstellen, die ein festes element innerhalb des body-element der Seite.
    So würde es Aussehen

    <body>
   <div id="background"></div>
    ...
</body>

    Und für die CSS habe ich Folgendes:

        #background {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
    background-size:contain;
}

    Und dies hat den trick für mich. Hoffentlich hilft es (jemand da draußen :P)

    • Dieser arbeitete für mich in chrome, aber nicht iOS.
    InformationsquelleAutor Adrian
  2. 3

    Du suchst css background-attachment Eigenschaft.

    div[data-role="page"]{
  background-attachment: fixed;
}

    Update:

    background-attachment:fixed wird unterstützt von iOS 5, wenn Sie mit älteren iOS-version können Sie erwägen, die Verwendung von iScroll.

    • Danke, aber auch dies funktioniert nicht.
    • Es funktioniert ab iOS 5, wenn Sie mit älteren iOS-version der WebKit-version von Safari nicht unterstützt background-attachment:fixed
    • Ya, es funktioniert auf iOS 5. Ich will es auf iOS 4.2 oder 4.3
    • JuicyScripter hat erklärt, dass die Feste position funktioniert nur auf iOS5+ und das nur mit Hilfe einer Bibliothek wie iScroll den gleichen Effekt auf iOS4 und unten.
    InformationsquelleAutor Juicy Scripter
  3. 0

    können Sie versuchen, diese:

     .ui-mobile
 .ui-page-active{

 display:block;
 overflow:visible;
 overflow-x:hidden;

 }

    funktioniert gut für mich.

    InformationsquelleAutor JavaScripter
  4. 0

    Können Sie Ihr Hintergrundbild auf der jQuery Seite:

    .ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
    InformationsquelleAutor Manikandan
  5. 0

    Versuchen Sie es mit diesem, diese Arbeit für mich.

    position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0  fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
    InformationsquelleAutor Charlo Melgoza Gutierrez
  6. 0
    <body>
   <div id="background"></div>
    ...
</body>

    css:

    #background {
    background-image: url("/images/background.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    width: 100%;
    position: fixed;
    background-position: 0 0;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    #background {
        background-attachment: initial !important;
    }
}

    Das problem ist, dass iOS-Geräte haben Fehler rendering gleichzeitig background-size:cover; und background-attachment:fixed; so dass Sie haben, um es zu beheben, indem @media

    InformationsquelleAutor Stan Fad
Schreibe einen Kommentar