Div mit Text und Hintergrund über bild

[thomas_aus_langenberg]

Ich bin verzweifelt... :-) und schon auch gegoogelt. Ich möchte eine Textbox mit Hintergrundfarbe weiß über ein Bild legen. (siehe Beispielbild) so hätte ich das gerne :-)

ich bekomm die zwei divs hin, auch mit Margin, das der Textcontent über dem Bild ist, aber die Hintergrundfarbe bleibt unter dem Bild - Ich hab die Boxen "eingefärbt"... sollen aber weiss sein.

CSS:
.termine_aussenbox {
margin: auto;
width: 80%;
background-color: aqua;
height: 20%;
}
.termine_innenbox {
width: 29%;
float:left;
margin: 2%;
height: 200px;
}
.termine_beschreibung {
width: 80%;
margin:auto;
margin-top: -50px;
background-color:rgb(170, 170, 170);
height: 200px;
padding: 10px;
box-shadow: 5px 5px 5px lightgray;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 15px;
}
.termine_datum {
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 14px;
margin-bottom: 4px;
}

HTML:
<div class="termine_aussenbox">
<?php
$ergebnis = mysqli_query($db, "SELECT * FROM termin ORDER BY datum LIMIT 3");
while($row = mysqli_fetch_object($ergebnis))
{?>
<div class="termine_innenbox">
<img src="/bilder/<?php echo $row->datei; ?>" width="100%" height/>
<div class="termine_beschreibung">
<div class="termine_datum"><?php echo $row->datum; ?></div>
<?php echo $row->teaser; ?>
<p><?php echo $row->beschreibung; ?></p>
</div>
</div>
<?php } ?>
</div>

Irgendwas mach ich falsch bestimmt :-(

 

[threadi]

Das ist kein HTML sondern PHP-Code. Relevant für eine gute Hilfe wäre der vom PHP erzeugte HTML-Code. Den kann man so natürlich nur erahnen.

Ich würde dir für Bildbeschriftungen eher das figcaption-Element innerhalb von figure empfehlen. Siehe: https://wiki.selfhtml.org/wiki/HTML/Elemente/figure

Per CSS kannst Du dieses dann positionieren. Dabei würde ich dir ebenfalls empfehlen mit relativer Positionierung zu arbeiten, da du dann per z-index die Ebenen bestimmen kannst die übereinander liegen. Beispiel (ungetestet)

figure img {
 position: relative;
 z-index: 10;
}
figure figcaption {
 margin-top: -50px;
 position: relative;
 z-index: 20;
}