folgende Perversität mit transparenten Bildern per CSS

W

Wachert

Guest
1 Div der einen "Kasten" bildet. In diesem div ein weiterer Div der diesen div "ausfüllt" welcher wiederrum "content" enthält.

Der "oberste" div enthält ein sich wiederholendes bild (repeat-y) welches leicht transparent ist damit der hintergrund durchscheint.

Der innere div der den oberen ausfüllt enthält ebenfalls ein bg bild welches nicht repeatet wird und nur oben rechts angezeigt werden soll, ebenfalls leicht transparent.

Wieso wird mir immer nur eines der hintergrundbilder angezeigt und das andere verschwindet immer? Die müssten doch eigentlich "simpel" übereinander liegen oder nicht? Habe nun extra mit pngs gearbeitet anstatt die backgrounds per css transparent zu machen aber selbst das hilft nicht wirklich.

Ich versuchs mal bildlich... :p

 

Anhänge

  • bsp.jpg
    bsp.jpg
    8,6 KB · Aufrufe: 67
W

Wachert

Guest
Code:
<div class="out">
<div class="in">
<div class="inc">content</div>
</div>
</div>

Code:
div.out {
width:400px;
min-height:300px;
border:1px solid white;
background:transparent url(outbg.png) repeat-y top center;
}
div.in {
background: transparent url(inbg.png) no-repeat top right;
}
div.inc {
padding:10px;
text-align:justify;
}
[code]

so ungefähr.
 

Gokux

O|²
Bei mir funktioniert das problemlos in allen gängigen Browsern. Hab die Beispiel PNGs aus meinem Anhang benutzt, beide transparent.
 

Anhänge

  • inbg.png
    inbg.png
    250 Bytes · Aufrufe: 172
  • outbg.png
    outbg.png
    1,3 KB · Aufrufe: 43
W

Wachert

Guest
Konnte ums verrecken keinen Fehler finden. Hab den Codeabschnitt samt CSS neu geschrieben und nun gehts...
 
W

Wachert

Guest
Mal schauen ob es dann jetzt auch mit 3 transparenten BGs übereinander klappt... ich wills mir im IE gar nicht erst ansehen...
 
Oben