Schrift mit transparentem Hintergrund über die volle Breite des Bildes.

[Gunnar Bittersmann]

@@Rolf B

Dafür musst Du das ".centered" Element auf left:0 und width:100% setzen

Nö, musst du nicht, solltest du nicht.

Nun die self-typischen Verbesserungstipps. Nimm sie oder kloppe sie in die Tonne.

Nein, das solltest du nicht.

Was du in die Tonne kloppen solltest: die absolute Positionierung. Die funktioniert spätestens dann nicht, wenn der Text höher ist als das Bild.

Statt absolut zu positionieren, kann man auch Grid-Layout verwenden

Nicht „kann man“, sondern „sollte man“.

Zweitens möchte ich Dir vorschlagen, dein Markup semantischer zu gestalten. Es gibt für solche Zwecke die Elemente figure und figcaption.

Das könnte aber auch ein Aufmacherbild und Überschrift sein; dann header und h1.

<figure class="illustration">
   <img src="kabel.jpg" alt="Kabel">
   <figCaption>Kabel</figCaption>
</figure>

Der Alternativtext macht keinen Sinn; ein Screenreader soll da nicht „Kabel Kabel“ vorlesen. alt="" ist in dem Fall richtig. (Das alt-Attribut muss aber vorhanden sein.)

Die Verbindung von Bild und Text kann man mit ID und ARIA herstellen:

<figure class="illustration">
   <img src="kabel.jpg" alt="" aria-labelledby="fig1-caption">
   <figCaption id="fig1-caption">Kabel</figCaption>
</figure>

---

.illustration {
  display: grid;
  grid-template: "illu" auto  /* Eine Zelle, Höhe auto */
                / 1fr;        /* und volle Breite */
  align-items: center;        /* Zellinhalt vertikal zentrieren */
}

Nice, so geht’s auch. ☞ Da steht ein Pferd zentriert.

Ich hatte da ein paar Linien mehr gezogen, die man beim vertikalen Zentrieren gar nicht braucht. Dann ließe sich aber der Text auch einfach im goldenen Schnitt plazieren.

Die "auto" Höhenangabe für die "illu" Zelle sorgt dafür, dass die Höhe der Abbildung durch die Abmessungen des Bildes bestimmt wird. Vorsicht bei Hochkantbildern, das könnte dann riesig werden.

Man könnte die Bildhöhe auf 100vh begrenzen. Dann füllt es u.U. aber nicht mehr die Breite aus.

😷 LLAP