[HTML/CSS] Background image

    Heyho,


    Ich brauch ma eure Hilfe. Undzwar hab ich ein Problem mit nem Background bei ner mobilen Web-App.


    Und zwar entwickle ich gerade mit Phonegap und jquery mobile eine App für Android und iOS. Jetzt will ich ein Bild als Hintergrund machen, dass mit der Devicegröße skaliert und mit dem Content nicht mitscrollt. Soweit so gut, dass funktioniert auch schon (hab ein div Container genommen, der den Hintergrund ausfüllt, mit ner fixen position). Aber wenn ich ein Bild ins Content mache, wird das im Hintergrund angezeigt (also hinter meinem Background), die jquery Controls (hab da noch ne Liste drinne) wird mir aber ganz normal im Vordergrund angezeigt. Ich hab auch schon versucht den z-index des Bildes hoch zu setzen, hat aber nichts verändert. Und wenn ich den z-index des Hintergrunddivs auf eine negative Zahl setze, wird mir der Hintergrund gar nicht mehr angezeigt. Vllt weiß ja einer von euch rat ;)


    Hier noch ein Ausschnitt aus dem html Code


    Und hier der CSS Teil dazu:

    Code
    1. .bg {
    2. background : transparent url(../res/bgK.jpg) 0 0 no-repeat fixed !important;
    3. background-size: 100% 100%;
    4. left: 0;
    5. right: 0;
    6. width: 100%;
    7. height: 100%;
    8. position: fixed;
    9. }

    z-index 0 für bg und 1 für das image hab ich ausprobiert, ändert auch nichts.


    detailContent bekommt von jquery diese css Klasse zugewiesen:

    Code
    1. .ui-content {
    2. border-width: 0;
    3. overflow: visible;
    4. overflow-x: hidden;
    5. padding: 15px;
    6. }

    warum tauschst du den eigtl nicht das ".bg" mit "body" aus und löscht den bg container? dann sollte es doch eigtl funktionieren. Oder hast du noch ein extra hintergrundbild bei body eingefügt?

    Kannst du dort doch dann auch machen oO
    Einfach das untere "position: fixed;" rausnehmen und du hast den Effekt den du mit dem Container erreichen wolltest
    Oder hab ich hier gerade einen Denkfehler :huh:

    Eigtl nicht. du kannst ja background-repeat: no-repeat; benutzen damit das Bild nur einmal angezeigt wird. Wordurch es ja nicht über den ganzen Content gezogen wird. Und mit background-attachment: fixed; bleibt es ja dann an der Stelle stehen. Kann man ja unter background alles zusammenfassen. Aber es hat normalerweiße den gleichen Effekt wie den, den du mit deinem container machen willst. Wäre ja was anderes wenn .bg kleiner als der Bildschirm wäre, aber bei dir ist der ja in height und width auf 100% gestellt.

    Sorry hab vergessen zu schreiben, dass background-attachment: fixed; verbuggt ist unter Android, kann das deshalb nicht benutzen. Hab jetzt aber ne Lösung gefunden, wenn ich dem img Objekt als style noch ein position: relative hinzufüge wird es über dem Hintergrund angezeigt. Warum dass so ist versteh ich zwar nicht, aber es funktioniert ^^. Trotzdem danke für die Hilfe :thumbup: