CSS | Reihenfolge Hintergrund
Eingetragen von someonespecial (80)am 06.04.2011 - 02:08 Uhr in
Ich habe ein allgemeines CSS Problem was mich gerade ziemlich ins grübeln bringt. Ich habe eine verschachtelte div-struktur aber die hintergrundgrafik des umschließenden divs wird immer vor die Grafik des inneren Divs gelegt, auch wenn ich einen z-index setze.
Da man den Wald ja manchmal vor lauter Bäumen nicht sieht wollte ich mal fragen ob ihr eine Lösung für das Problem hättet.... hier mal der CSS code:
#main {
width: 980px;
padding-top: 0px;
min-height: 500px;
background-image: url(bodybg.png);
background-repeat: repeat-y;
z-index: 2;
}
#main_body {
float:left;
width:700px;
height: 400px;
background-attachment: fixed;
background-image: url(main_body_bg.png);
background-repeat: no-repeat;
background-position: left top;
z-index: 3;
}also, #main_body liegt IN #main, aber die grafik bodybg.png überdeckt die grafik main_body_bg.png. Setze ich in #main_body eine hintergrundfarbe überlagert diese bodybg.png. entferne ich den hintergrund aus #main wird auch main_body_bg.png korrekt dargestellt. Es liegen also keine schreibfehler bei den bilddateien oder ähnliches vor....
ich versteh es einfach nicht.... falls ihr einen hinweis habt wäre mir seeehr geholfen...
- Anmelden oder Registrieren um Kommentare zu schreiben
postion fehlt! z-index
am 06.04.2011 - 06:08 Uhr
postion fehlt!
z-index funktioniert nur mit position!
also position:relative;
außerdem floatet der eine div
position...
am 06.04.2011 - 14:03 Uhr
danke für den hinweis mit der position, das hatte ich glatt vergessen... aber welche auswirkung hat das float auf den z-index in dem fall?
es löst aber mein problem nicht :( was mich so wundert ist, dass die hintergrundfarbe ja VOR das umschließende div plaziert wird wenn ich sie setze, das hintergrundbild dagegen nicht.
Hast Du mal probiert die
am 02.05.2011 - 10:29 Uhr
Hast Du mal probiert die Farbe auf transparent zu stellen?
#main_body {
float:left;
width:700px;
height: 400px;
background: transparent url(main_body_bg.png) no-repeat left top fixed;
}