How-To: Vollbild-Slider mit Text-Overlay in TYPO3 12.4 LTS (Bootstrap Package 14)

TYPO3 12 LTS & Bootstrap Package 14: Slider mit Text-Overlay und halbtransparentem Hintergrund. Nach dem Upgrade auf TYPO3 12 LTS mit dem Bootstrap Package 14 hat sich das Verhalten einiger Slider-Layouts geändert. Wer in seinem eigenen Sitepackage einen Text-Slider mit Hintergrundbild verwendet, stellt häufig fest: Die Positionierung des Textes oder die Farben passen nicht mehr wie gewohnt. In diesem Beitrag zeigen wir Schritt für Schritt, wie du den Text wieder mittig über dem Hintergrundbild platzierst – inklusive halbtransparentem Overlay für bessere Lesbarkeit.

Voraussetzungen

TYPO3 Version 12.4 LTS
Bootstrap Package Version 14.x
Eigenes Sitepackage (z. B. erstellt mit dem Sitepackage Builder)

Ziel

Wir möchten den Text im Slider (Typ Text and Image) zentriert auf dem Hintergrundbild anzeigen. Zusätzlich bekommt der Textblock eine halbtransparente schwarze Fläche für bessere Lesbarkeit. Das Bild zum Beitrag ist ein Beispiel dafür, wie es in der Folge nach den Änderungen aussieht.

Schritt 1 – Template-Datei anpassen

Im eigenen Sitepackage unter Resources/Private/Templates/ContentElements/Carousel/Item/TextAndImage.html fügen wir eine eindeutige ID und Container-Struktur ein. So kann das CSS gezielt greifen:

<html>

<div id=“slidersp“>
<div class=“valign“>
<div class=“carousel-text vcontainer“>
<h1 class=“carousel-header text-center“>{item.data.header}</h1>
<h3 class=“carousel-subheader text-center“>{item.data.subheader}</h3>
<p class=“lead text-center“><f:format.html>{item.data.bodytext}</f:format.html></p>
</div>
</div>
</div>

</html>

Diese Struktur sorgt dafür, dass der Textblock über dem Hintergrundbild positioniert werden kann.

Schritt 2 – SCSS-Code im Theme ergänzen

Im SCSS-Verzeichnis des Sitepackage (z. B. Resources/Public/Scss/theme.scss) fügen wir den folgenden Abschnitt hinzu:


//
// ============================================================
//  Custom Styles: Slider (TextAndImage)
//  Eingefügt am: 13.10.2025
//  Zweck: Text mittig auf Hintergrundbild mit halbtransparentem Overlay
// ============================================================
//

#slidersp h1 {
  color: #e20015;
  font-weight: 500;
}

#slidersp h2,
#slidersp .lead {
  color: #fff;
  font-weight: 300;
}

.carousel-item-type-text_and_image {
  position: relative;

  .carousel-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: rgba(0, 0, 0, 0.45); // halbtransparent schwarz
    padding: 2em 3em;
    border-radius: 0.5em;
    max-width: 80%;
    color: #fff;
    z-index: 5;
  }

  .carousel-header {
    color: #e20015;
    font-weight: 500;
    font-size: 2.7em;
    margin-bottom: 0.4em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
  }

  .carousel-subheader {
    color: #fff;
    font-weight: 300;
    font-size: 1.85em;
    margin-bottom: 0.6em;
  }

  .lead,
  .carousel-text p {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.4em;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  }

  .carousel-backgroundimage {
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 767px) {
  .carousel-item-type-text_and_image .carousel-text {
    max-width: 90%;
    padding: 1.2em;
  }

  .carousel-item-type-text_and_image .carousel-header {
    font-size: 1.6em; // 40 % kleiner
  }

  .carousel-item-type-text_and_image .carousel-subheader {
    font-size: 1.1em;
  }

  .carousel-item-type-text_and_image .lead {
    font-size: 0.9rem;
  }
}

.carousel-item-type-text_and_image {
  --carousel-item-color: #e20015; // überschreibt Inline-Wert
}

Dieser Code sorgt für:

zentrierten Text über dem Bild
halbtransparenten schwarzen Hintergrund
rote Hauptüberschrift (h1), weiße Subheadline und Text
automatische Größenanpassung für Mobilgeräte (−40 %)

Schritt 3 – Caches leeren und testen

Nach dem Speichern die TYPO3-Caches im Backend löschen (System → Wartung → Cache löschen). Danach die Seite neu laden – das Text-Overlay sollte nun sichtbar sein.

Fazit

Mit wenigen Zeilen SCSS und einer kleinen Template-Erweiterung lässt sich der Slider aus dem Bootstrap Package wieder perfekt anpassen. Besonders auf dunklen oder kontrastreichen Bildern sorgt das halbtransparente Overlay für deutlich bessere Lesbarkeit und ein modernes Erscheinungsbild.

Voraussetzungen für die Umsetzung

TYPO3 12.4 LTS
Bootstrap Package ≥ 14.x
Eigenes Sitepackage (z. B. via Sitepackage Builder)