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

 

[MrMurphy]

Deine Ziele werden leider nicht so ganz klar.

Wie threadi bereits schrieb wissen wir nicht, was hinter dem php-Quelltext steckt, also was für ein HTML-Quelltext erzeugt wird. Deshalb können wir nur raten und vermuten.

Auf Grund der Bilder gehe ich davon aus, das

1. Der Text mehr als einen Satz enthält, dazu mit Überschrift(en) und weiteren Inhalten wie Absätzen, Aufzählungen, weitere Bilder, ...

2. Das Bild zwar thematisch passt, aber keine Informationen enthält. Deshalb sollte es nach den HTML-Regeln als Hintergrundbild eingebunden werden. Das wiederum vereinfacht die Einbindung deutlich.

Ich habe mal ein Beispiel erstellt. Zu folgendem HTML

      <article class="text-auf-bild">
         <div>
            <p>2024-11-07</p>
            <h2>Besichtigung UPS World Hub Köln</h2>
            <p>Der Flughafen Köln/Bonn dient als Drehkreuz für die Frachtfluggesellschaften UPS Airlines und FedEx sowie als Basis der Billigfluggesellschaft Eurowings. Auf dem Areal ist die Flugbereitschaft des Bundesministeriums der Verteidigung beheimatet. Bis September 2014 war er Heimatbasis der Regionalfluggesellschaft Lufthansa CityLine.</p>
            <p>2020 wurde der Flughafen in der Skytrax World Airport Awards-Umfrage unter 13,5 Millionen Befragten zum zweitbesten Regional-Flughafen Europas gewählt, und weltweit auf Platz 3. 2014, 2015, 2016 und 2019 lag der Flughafen auf Platz 1 in Europa und Platz 2 weltweit. In der Kategorie World’s Top 100 Airports liegt der Flughafen 2020 unter den besten 30 weltweit. Außerdem wurde der Flughafen mit vier von fünf Sternen ausgezeichnet.</p>
         </div>
      </article>

folgendes CSS:

   /* .text-auf-bild */
   @media all {
      .text-auf-bild {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg);
         background-repeat: no-repeat;
         background-size: contain;
         padding: 45vw 2rem 2rem 2rem;
      }
      .text-auf-bild>div {
         background-color: white;
         box-shadow: 5px 5px 5px lightgray;
         max-width: 80%;
         padding: 1rem 1rem 1rem 1rem;
         border-radius: 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }
   @media only screen and (min-width: 1190px) {
      .text-auf-bild {
         padding: 30rem 2rem 2rem 2rem;
      }
   }

Zum direkten Kopieren und Ausprobieren der gesamte Quelltext einer Beispieldatei:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Text auf Bild</title>
   <meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->

   <style>

   /* Überschriften - font-family: 'Roboto Slab', Serif; */
   @import url(https://fonts.googleapis.com/css?family=Roboto+Slab);

   /* Fließtext - font-family: 'Roboto', Sans-Serif"; */
   @import url(https://fonts.googleapis.com/css?family=Roboto);

   /* Zahlen* - font-family: 'Merriweather'; */
   @import url(https://fonts.googleapis.com/css?family=Merriweather);

   /* Basisangaben */
   @media all {
      * {
         /* box-sizing: border-box; */
         min-width: 1px;
      }
      html {
      }
      body {
         max-width: 1200px;
         margin: 0rem auto 0rem auto;
      }
   }

   /* Schriften */
   @media all {
      html {
         font-family: sans-serif;
         font-size: 120%;
         line-height: 1.3;
      }
      h1 {
         font-family: 'Roboto Slab', serif;
         font-size: 1.2rem;
         letter-spacing: 0.1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      h2, h3, h4, h5, h6 {
         font-family: 'Roboto Slab', serif;
         font-size: 1rem;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      p, li, dt, dd, address {
         font-family: Roboto, sans-serif;
         font-size: 1rem;
         font-style: normal;
         margin: 0.5rem 0rem 0.5rem 0rem;
      }
      a {
         /* darkblue */
         color: hsla(240, 100%, 27%, 1);
         text-decoration: none;
         outline: none;
         margin: 0rem 0rem 0rem 0rem;
      }
      figcaption {
         font-family: Roboto, sans-serif;
         font-size: 0.9rem;
         margin: 0rem 0rem 0rem 0rem;
      }
   }

   /* Grafiken */
   @media all {
      figure {
         text-align: center;
         min-width: 1px;
         max-width: 100%;
         min-height: 1px;
         margin: 0rem;
         display: inline-block;
      }
      img {
         min-width: 1px;
         display: block;
         max-width: 100%;
         border: 0px;
      }
      figcaption {
         text-align: left;
         display: inline-block;
      }
   }

   /* .text-auf-bild */
   @media all {
      .text-auf-bild {
         background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/41/UPS_Boeing_747-400_in_Dubai_KvW.jpg);
         background-repeat: no-repeat;
         background-size: contain;
         padding: 45vw 2rem 2rem 2rem;
      }
      .text-auf-bild>div {
         background-color: white;
         box-shadow: 5px 5px 5px lightgray;
         max-width: 80%;
         padding: 1rem 1rem 1rem 1rem;
         border-radius: 0.5rem;
         margin: 0rem auto 0rem auto;
      }
   }
   @media only screen and (min-width: 1190px) {
      .text-auf-bild {
         padding: 30rem 2rem 2rem 2rem;
      }
      .text-auf-bild>div {
      }
   }

   </style>
</head>
<body>
   <header id="pageheader" class="pageheader">
      <h1>Text auf Bild</h1>
   </header>
   <nav id="navigation" class="navigation">
   </nav>
   <main id="content" class="content">
      <article class="text-auf-bild">
         <div>
            <p>2024-11-07</p>
            <h2>Besichtigung UPS World Hub Köln</h2>
            <p>Der Flughafen Köln/Bonn dient als Drehkreuz für die Frachtfluggesellschaften UPS Airlines und FedEx sowie als Basis der Billigfluggesellschaft Eurowings. Auf dem Areal ist die Flugbereitschaft des Bundesministeriums der Verteidigung beheimatet. Bis September 2014 war er Heimatbasis der Regionalfluggesellschaft Lufthansa CityLine.</p>
            <p>2020 wurde der Flughafen in der Skytrax World Airport Awards-Umfrage unter 13,5 Millionen Befragten zum zweitbesten Regional-Flughafen Europas gewählt, und weltweit auf Platz 3. 2014, 2015, 2016 und 2019 lag der Flughafen auf Platz 1 in Europa und Platz 2 weltweit. In der Kategorie World’s Top 100 Airports liegt der Flughafen 2020 unter den besten 30 weltweit. Außerdem wurde der Flughafen mit vier von fünf Sternen ausgezeichnet.</p>
         </div>
      </article>
   </main>
   <footer id="pagefooter" class="pagefooter">
      <p>Originaldiskussion: <a href="https://www.html.de/threads/div-mit-text-und-hintergrund-uber-bild.61892/">https://www.html.de/</a></p>
   </footer>
</body>
</html>