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
- <div data-role="page" id="detail">
- <div data-role="header" id="detailHeader" data-theme="d" data-position="fixed">
- <h1>Header</h1>
- </div>
- <div class="bg"></div> <!-- hintergrunds div! -->
- <div data-role="content" id="detailContent">
- <img src="../res/town.jpg" style="width: 115%; margin: -15px;">
- <ul data-role="listview" data-inset="true" id="detailFakeMenu" data-theme="a">
- <li data-role="fieldcontain">
- <h1>Überschrift für blubb</h1>
- <p style="white-space: normal;">
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
- </p>
- </li>
- </ul>
- </div>
- <div data-role="footer" data-position="fixed" data-theme="d">
- <div data-role="navbar" class="nav-glyphish">
- <ul>
- <li><a href="#" data-icon="custom" class="icon1">Footer1</a></li>
- <li><a href="#" data-icon="custom" class="icon2">Footer2</a></li>
- <li><a href="#" data-icon="custom" class="icon3">Footer3</a></li>
- </ul>
- </div><!-- /navbar -->
- </div><!-- /footer -->
- </div>
Alles anzeigen
Und hier der CSS Teil dazu:
- .bg {
- background : transparent url(../res/bgK.jpg) 0 0 no-repeat fixed !important;
- background-size: 100% 100%;
- left: 0;
- right: 0;
- width: 100%;
- height: 100%;
- position: fixed;
- }