GeneratePress: Großes Hero-Bild bildschirmfüllend auf der Startseite

Ein großes Bild auf der Startseite soll den gesamten ersten Bildschirm füllen, die Navigation soll darüberliegen und der eigentliche Hero-Text direkt auf dem Bild erscheinen. In GeneratePress ist das grundsätzlich gut machbar – die Verwirrung entsteht meist dadurch, dass Header, Navigation, Hero und normaler Seiteninhalt vier unterschiedliche Bereiche sind.

Im ursprünglichen Arbeitsverlauf war genau das der Knackpunkt: Das Bild lag oben, das Menü darüber, aber der normale Content begann erst unterhalb des Bildes. Das ist technisch zunächst korrekt. Wenn Text auf dem Hero liegen soll, muss dieser Text Teil des Hero-Bereichs sein – nicht erst der normale Seiteninhalt darunter.

Was bedeutet „bildschirmfüllend“?

Ein echter Fullscreen-Hero ist mindestens so hoch wie der sichtbare Browserbereich. Modernes CSS verwendet dafür bevorzugt:

min-height: 100svh;

svh berücksichtigt mobile Browserleisten besser als das klassische 100vh. Als Fallback kann zusätzlich 100vh angegeben werden:

min-height: 100vh;
min-height: 100svh;

Variante 1: Hero direkt mit GenerateBlocks bauen

Für eine moderne Startseite ist ein GenerateBlocks-Container oft der flexibelste Weg. Der Aufbau:

  1. äußerer Hero-Container über volle Breite
  2. Hintergrundbild auf diesem Container
  3. innerer Content-Container
  4. H1, Text und Buttons innerhalb des Hero

Der äußere Container erhält eine Mindesthöhe von 100svh und wird als Flex-Container genutzt, damit der Inhalt vertikal positioniert werden kann.

Beispiel-CSS für einen Fullscreen-Hero

.homepage-hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20%20%22%3E%3C/svg%3E#}/wp-content/uploads/hero.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Der Hero wächst damit mindestens auf Bildschirmhöhe. Wenn sehr viel Inhalt darin steckt, darf er höher werden – das ist für Responsivität meist besser als eine starre height: 100vh.

Warum min-height besser ist als height

Eine feste Höhe von 100vh kann bei kleinen Displays problematisch werden, wenn Überschrift, Text und Buttons mehr Platz benötigen. Dann läuft Inhalt aus dem Bereich heraus.

min-height sagt dagegen: mindestens Bildschirmhöhe, bei Bedarf größer.

Das Hintergrundbild richtig skalieren

Für einen Hero ist background-size: cover in den meisten Fällen richtig. Das Bild füllt die gesamte Fläche, wird aber je nach Bildschirmformat beschnitten.

Das ist unvermeidbar: Ein breites Desktopbild und ein schmales Smartphone haben völlig unterschiedliche Seitenverhältnisse.

Den wichtigen Bildbereich mit background-position sichern

Wenn sich eine Person oder ein wichtiges Motiv nicht genau in der Mitte befindet, passe die Position an:

background-position: 60% center;

Auf Mobilgeräten kann ein anderer Ausschnitt nötig sein:

@media (max-width: 768px) {
    .homepage-hero {
        background-position: 68% center;
    }
}

Warum der normale Content unter dem Bild beginnt

Wenn ein Hero eine eigene Block- oder Header-Sektion ist, nimmt er realen Platz im Dokument ein. Ein 100svh hoher Hero belegt also zunächst einen ganzen Bildschirm. Der nächste normale Abschnitt beginnt logischerweise danach.

Wenn dein Text auf dem Bild erscheinen soll, gehört er in den Hero. Es ist nicht sinnvoll, den nachfolgenden Content mit großen negativen Margins künstlich nach oben zu ziehen.

Navigation über das Hero-Bild legen

GeneratePress Premium besitzt für Page Heros beziehungsweise Header Elements die Funktion, Site Header und Content zu mergen. Die aktuelle GeneratePress-Dokumentation beschreibt ausdrücklich „Merge with Content“: Der Site Header wird über den darunterliegenden Hero gelegt.

Damit entsteht das gewünschte Erscheinungsbild:

  • Hero beginnt ganz oben.
  • Navigation liegt über dem Hero.
  • Hintergrundbild reicht optisch hinter Header und Navigation.

GeneratePress Header Element: Full Screen

Im klassischen GeneratePress-Header-Element gibt es zusätzlich eine Full Screen-Option. Laut offizieller Dokumentation setzt diese voraus, dass der Site Header mit dem Hero gemergt wird.

Das erklärt ein häufiges Problem: Full Screen allein reicht nicht, wenn Header und Hero weiterhin als getrennte Bereiche ausgegeben werden.

Header-Höhe beim Inhalt berücksichtigen

Wenn die Navigation über dem Hero liegt, kann der Hero-Text sonst unter dem Menü beginnen. GeneratePress bietet dafür in Header Elements die Option Offset Site Header Height.

Bei einem selbst gebauten GenerateBlocks-Hero kannst du stattdessen den oberen Innenabstand entsprechend planen.

Hero-Text nicht mit riesigem Padding positionieren

Im ursprünglichen Verlauf wurde zunächst versucht, die Hero-Höhe mit 200 Pixel oder mehr Padding oben und unten zu erzeugen. Das kann funktionieren, ist aber für einen echten Fullscreen-Hero ungenau.

Besser:

  • Höhe über min-height steuern.
  • Inhalt mit Flexbox vertikal ausrichten.
  • Padding nur für Sicherheitsabstände verwenden.

Vertikale Position über Flexbox

Mittig:

display: flex;
align-items: center;

Eher unten:

display: flex;
align-items: flex-end;

Dann gibst du dem inneren Container unten noch ausreichend Padding.

Overlay für lesbaren Text

Ein Hero-Bild direkt hinter weißem Text braucht häufig eine Abdunklung. Das lässt sich in GeneratePress/GenerateBlocks direkt als Overlay oder per CSS umsetzen:

.homepage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.42),
        rgba(0,0,0,.24) 45%,
        rgba(0,0,0,.58)
    );
}

Der innere Inhalt muss anschließend darüber liegen:

.homepage-hero > * {
    position: relative;
    z-index: 1;
}

Sticky Navigation kann getrennte Farben benötigen

Im Ursprungschat war die Navigation angeheftet, dunkelte aber beim Scrollen nicht ab. Das ist ein eigener Zustand. Eine transparente Navigation über dem Hero kann beim Scrollen in eine kompakte, dunkle Sticky Navigation wechseln.

Die Farben des normalen transparenten Headers und des Sticky Headers sollten deshalb getrennt geplant werden.

Beispiel für einen einfachen Sticky-Hintergrund

Die konkreten GeneratePress-Klassen können je nach Konfiguration variieren. Konzeptionell gilt:

.is_stuck {
    background-color: rgba(20,20,20,.94);
    backdrop-filter: blur(8px);
}

Bevor du solches CSS verwendest, solltest du im Browser-Inspektor die tatsächliche Klasse deiner Sticky-Navigation prüfen.

Transparentes Menü: Logo und Links müssen zum Motiv passen

Wenn der Header über dem Bild liegt, können dunkle Menülinks auf einem dunklen Foto unlesbar werden. GeneratePress erlaubt für Page Heros eigene Navigation- und Headerfarben. Das ist sauberer als pauschal dieselbe Menüfarbe auf allen Seiten zu erzwingen.

Nur auf der Startseite anwenden

Ein bildschirmfüllender Hero ist oft nur für die Homepage gedacht. Bei GeneratePress Elements lassen sich Display Rules verwenden, um einen Header/Page Hero gezielt nur auf der Startseite auszugeben.

Bei einem normalen GenerateBlocks-Container liegt er ohnehin direkt im Inhalt der Startseite und betrifft keine anderen Seiten.

Hero als Block Element oder Header Element?

GeneratePress bietet heute mehrere Element-Typen. Für bestehende Installationen kann ein klassisches Header Element vorhanden sein, während neuere Aufbauten häufig mit Block Elements und GenerateBlocks erstellt werden.

Der gestalterische Grundsatz bleibt gleich:

  • Hero ist ein eigener oberster Bereich.
  • Hero-Inhalt gehört in diesen Bereich.
  • Header/Navigation werden bei Bedarf über den Hero gelegt.
  • der nachfolgende Content beginnt danach.

Performance des Hero-Bildes

Weil das Hero-Bild sofort beim Seitenaufruf sichtbar ist, beeinflusst es den Largest Contentful Paint stark. Deshalb:

  • keine unnötig riesige Originaldatei verwenden,
  • WebP oder AVIF einsetzen,
  • Bild passend zur realen Darstellung dimensionieren,
  • unnötige Slider mit vielen großen Bildern vermeiden.

Mobil muss nicht exakt wie Desktop aussehen

Ein Hero, der auf Desktop sehr viel freie Bildfläche zeigt, kann auf dem Smartphone besser mit geringerer Mindesthöhe funktionieren. Beispielsweise:

@media (max-width: 768px) {
    .homepage-hero {
        min-height: 82svh;
    }
}

Das ist keine Pflicht. Es ist eine gestalterische Entscheidung – wichtig ist, dass Text und Call-to-Action ohne unnötiges Scrollen erreichbar bleiben.

Typische Fehler

  • Hero-Text liegt im nächsten Abschnitt: Dann erscheint er zwangsläufig erst unter dem Bild.
  • Nur großes Padding statt echter Mindesthöhe: Höhe reagiert schlecht auf verschiedene Displays.
  • Header und Hero nicht gemergt: Navigation liegt als eigener Block oberhalb.
  • Feste 100vh-Höhe mit viel Inhalt: Text kann überlaufen.
  • Kein Overlay: weiße Schrift verschwindet in hellen Bildbereichen.
  • Falscher Bildausschnitt mobil: Hauptmotiv wird durch cover abgeschnitten.

Robuste GenerateBlocks-Grundversion

.homepage-hero {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    background: url('/wp-content/uploads/hero.jpg') center / cover no-repeat;
}

.homepage-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.36);
}

.homepage-hero > * {
    position: relative;
    z-index: 1;
}

Fazit

Ein bildschirmfüllendes Hero-Bild in GeneratePress gelingt am zuverlässigsten, wenn Hero und normaler Content klar getrennt werden. Der Hero erhält min-height: 100svh, sein Inhalt liegt innerhalb derselben Sektion und das Bild wird mit cover skaliert. Soll die Navigation über dem Bild liegen, muss der Site Header mit dem Hero beziehungsweise Content gemergt werden. Dass der nachfolgende normale Seiteninhalt erst unter dem Hero beginnt, ist dann kein Fehler, sondern die logische Dokumentstruktur.

Aktuell geprüft

Die GeneratePress-Funktionen „Merge with Content“, „Full Screen“, „Offset Site Header Height“ sowie die Page-Hero-Optionen wurden mit der aktuellen GeneratePress-Dokumentation abgeglichen.