[HTML/CSS] Background image

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

      [HTML/CSS] Background image

      [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

      Quellcode

      1. <div data-role="page" id="detail">
      2. <div data-role="header" id="detailHeader" data-theme="d" data-position="fixed">
      3. <h1>Header</h1>
      4. </div>
      5. <div class="bg"></div> <!-- hintergrunds div! -->
      6. <div data-role="content" id="detailContent">
      7. <img src="../res/town.jpg" style="width: 115%; margin: -15px;">
      8. <ul data-role="listview" data-inset="true" id="detailFakeMenu" data-theme="a">
      9. <li data-role="fieldcontain">
      10. <h1>Überschrift für blubb</h1>
      11. <p style="white-space: normal;">
      12. 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.
      13. </p>
      14. </li>
      15. </ul>
      16. </div>
      17. <div data-role="footer" data-position="fixed" data-theme="d">
      18. <div data-role="navbar" class="nav-glyphish">
      19. <ul>
      20. <li><a href="#" data-icon="custom" class="icon1">Footer1</a></li>
      21. <li><a href="#" data-icon="custom" class="icon2">Footer2</a></li>
      22. <li><a href="#" data-icon="custom" class="icon3">Footer3</a></li>
      23. </ul>
      24. </div><!-- /navbar -->
      25. </div><!-- /footer -->
      26. </div>
      Alles anzeigen


      Und hier der CSS Teil dazu:

      Quellcode

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

      Danke an xNiGhTMaR3x für die Signatur und Avatar =)
      Was für nen css hat contentDetail
      Schon versucht .bg auf z-index = 0 zu setzen und das image auf 1?
      Manche machen den fehler nur einem element den z-index zuzuweisen

      hangman schrieb:

      Wenn es bei der deutschen Sprache eine Syntax Prüfung gäbe, wären so einige Menschen stumm


      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:

      Quellcode

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

      Danke an xNiGhTMaR3x für die Signatur und Avatar =)
      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?
      Turn ashes into art
      Der Body umfasst ja die Größe der ganzen Seite. Ich will aber dass das Hintegrundbild nicht mit dem Content mitscrollt, sonder stehen bleibt (deshab auch das "position: fixed").

      Danke an xNiGhTMaR3x für die Signatur und Avatar =)
      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:
      Turn ashes into art
      Das Hintergrundbild wird dann über den kompletten Content lang gezogen, bedeutet also es scrollt mit und bleibt beim scrollen nicht stehen wie erwünscht ;)

      Danke an xNiGhTMaR3x für die Signatur und Avatar =)
      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.
      Turn ashes into art
      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:

      Danke an xNiGhTMaR3x für die Signatur und Avatar =)