✔ DIV bgcolor wird nicht angezeigt

[hoktar]

Ich hab ein kleines Problem bei diesem Code:


<div style='width: 223; height:264; background-image:url(bild1.png);'>
<img src='bild.png'>
<div style='z-index:100 ; background-color:#FFFFFF; height: 20px;'>
text
</div>
</div>

Ich hab ein DIV(1) in dem ein Bild ist und in diesem DIV(1) noch ein DIV(2) das über das Bild gelegt wird.

Das 2. DIV hat eine Hintergrundfarbe, nur die wird nicht angezeigt. Der Text wird schon angezeigt, nur die BG Farbe ist einfach nicht da.

Es hat irgendwas mit der Reihenfolge zu tun, weil wenn ich das 2. DIV so definiere, dass es nicht über dem Bild sondern drunter irgendwo liegt ist der BG sichtbar!

Es scheint wie wenn das Bild eine höhere Priorität hat als ein BG von einem DIV das drüber liegt, aber das kann doch nicht sein?

Hat Jmd. eine Idee was falsch ist oder was ich tun könnte?
Vielen Dank schonmal!

 

[Maik]

Hi,

mit dem Code-Snippet wird die Hintergrundfarbe des zweiten DIVs bei mir browserübergreifend klar und deutlich angezeigt - hab sie hier in meiner Testseite kurz auf gelb umgestellt:



Achja, im ersten DIV fehlt der width- / height-Deklaration eine Einheitenangabe (px), und die angewandte z-index-Eigenschaft zur Schichtpositionierung des zweiten DIVs greift nur in Verbindung mit einer Angabe zu position (absolute oder relative).

mfg Maik

 

[hoktar]

danke erstmal, aber ich fürchte es funktioniert bei dir nur durch zufall.
könntest du mal bitte das gelbe div höher, also direkt auf das bild schieben? (das bild ist doch das schwarze oder?

wenn das div nicht auf dem bild liegt gehts bei mir auch aber sobal es über das bild ragt, ist dort der BG weg :/

EDIT:
HA! hat sich erliedigt! hab jetzt deinen tipp mit dem z-index ausprobiert. das war mir neu, hab nicht gewusst, dass das nur mit position funktioniert.
und siehe da, es t! hab zwar eh z-index drin gehabt aber eben kein position..

also vielen dank, jetzt passt alles

 

[Maik]

Die Funktionstüchtigkeit ist bzw. war kein Zufall

Selbst die Schichtpositionierung des zweiten DIVs über dem Grafikelement erzeugt bei mir kein Darstellungsproblem mit der Hintergrundfarbe:

<div style='position:relative;width: 223px; height:264px; background-image:url(system-control-center.jpg);'>
     <img src='system-control-center_invert.jpg'>
     <div style='position:absolute;top:10px;left:0;width:100%;z-index:100; background-color:#FFFF00; height: 20px;'>
          text
     </div>
</div>

Und vernachlässige bitte nicht die Shift-Taste auf deiner Tastatur - vielen Dank

mfg Maik