GeneratePress: Festes Hintergrundbild in einem Container

Ein normales Hintergrundbild in GenerateBlocks lässt sich mit Position, Größe und Wiederholung gut steuern. Schwieriger wird es bei einem speziellen Effekt: Das Bild soll oben links deutlich sichtbar beginnen, ungefähr den linken oberen Bereich ausfüllen und zur Mitte, nach rechts und nach unten immer transparenter werden. Im ursprünglichen Arbeitsverlauf kam zusätzlich hinzu, dass das Bild bereits blass beginnen und exakt mit dem 20-Pixel-Innenabstand des Containers ausgerichtet sein sollte.

Für diesen Effekt ist eine CSS-Maske auf einem Pseudo-Element die sauberste Lösung. Das Bild wird dabei nicht verändert. CSS steuert nur, welche Bereiche sichtbar beziehungsweise transparent dargestellt werden.

1. „Festes Hintergrundbild“ kann zwei Dinge bedeuten

Bei diesem Thema sollte man zuerst einen Begriff klären. „Fest“ kann bedeuten:

  • Das Bild ist fest oben links im Container positioniert und bewegt sich dort nicht.
  • Das Bild bleibt beim Scrollen am Browserfenster stehen – CSS background-attachment: fixed.

Der hier beschriebene Effekt meint vor allem die erste Variante: ein im Container verankertes Bild, das ausläuft. background-attachment: fixed ist dafür nicht erforderlich.

2. Warum die normalen GenerateBlocks-Hintergrundeinstellungen nicht ganz reichen

GenerateBlocks kann Hintergrundbilder positionieren, skalieren und mit Farben beziehungsweise Verläufen kombinieren. Ein Bild selbst radial von einer Ecke aus transparent zu maskieren ist jedoch ein speziellerer CSS-Effekt.

Eine normale Farbverlaufsebene kann das Bild optisch überdecken. Eine Mask macht dagegen die Bildebene tatsächlich transparent. Dadurch scheint der echte Container-Hintergrund durch.

3. Container mit einer CSS-Klasse versehen

Gib dem gewünschten GenerateBlocks-Container unter Erweitert → Zusätzliche CSS-Klasse(n) zum Beispiel:

fade-bg-container

Im CSS wird daraus der Selektor:

.fade-bg-container

4. Grundstruktur mit Pseudo-Element

.fade-bg-container {
    position: relative;
    overflow: hidden;
}

.fade-bg-container::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/wp-content/uploads/dein-bild.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top left;
    z-index: 0;
    pointer-events: none;
}

.fade-bg-container > * {
    position: relative;
    z-index: 1;
}

Der Container wird zum Bezugspunkt. Das Pseudo-Element liegt absolut dahinter. Der eigentliche Text bleibt darüber und kann normal mit GenerateBlocks bearbeitet werden.

5. Das Bild von links oben ausblenden

Der eigentliche Effekt entsteht mit einer radialen Maske:

.fade-bg-container::before {
    -webkit-mask-image: radial-gradient(
        ellipse at top left,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.75) 35%,
        rgba(0,0,0,0) 72%
    );
    mask-image: radial-gradient(
        ellipse at top left,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,.75) 35%,
        rgba(0,0,0,0) 72%
    );
}

Bei einer CSS-Maske bedeutet eine hohe Alpha-Deckkraft: Bild sichtbar. Transparenz in der Maske bedeutet: Bild verschwindet.

6. Circle oder ellipse?

Mit:

circle at top left

entsteht ein kreisförmiger Auslauf. In einem breiten Container wirkt häufig:

ellipse at top left

natürlicher, weil sich der Verlauf an das Seitenverhältnis anpasst.

7. Wie weit das Bild sichtbar bleibt

Die Prozentwerte der Maske sind die wichtigste Stellschraube.

Beispiel:

rgba(0,0,0,1) 0%,
rgba(0,0,0,.8) 35%,
transparent 70%

Bedeutet:

  • an der linken oberen Ecke vollständig sichtbar,
  • bis etwa 35 Prozent noch deutlich vorhanden,
  • bis 70 Prozent vollständig ausgeblendet.

Wenn das Bild schneller verschwinden soll, reduzierst du den letzten Wert auf beispielsweise 55 Prozent. Soll es weiter in die Mitte hineinreichen, erhöhst du ihn auf 80 oder 90 Prozent.

8. Das Bild schon am Start blass machen

Im ursprünglichen Verlauf sollte das Bild bereits in der linken oberen Ecke deutlich blasser beginnen. Dafür kannst du die maximale Masken-Deckkraft reduzieren:

-webkit-mask-image: radial-gradient(
    ellipse at top left,
    rgba(0,0,0,.45) 0%,
    rgba(0,0,0,.28) 35%,
    transparent 70%
);

Damit wird das Bild nirgendwo vollständig deckend.

9. Noch einfacher: separate opacity verwenden

Wenn das gesamte Bild grundsätzlich blass sein soll, ist es oft übersichtlicher, die Maske für den Auslauf und opacity für die allgemeine Stärke zu trennen:

.fade-bg-container::before {
    opacity: .45;
    -webkit-mask-image: radial-gradient(ellipse at top left, #000 0%, #000 35%, transparent 75%);
    mask-image: radial-gradient(ellipse at top left, #000 0%, #000 35%, transparent 75%);
}

So kannst du unabhängig voneinander steuern:

  • Wie stark ist das Bild insgesamt?
  • Wie schnell läuft es aus?

10. Bild nur im linken oberen Teil anzeigen

Das Pseudo-Element muss nicht die komplette Containerfläche bedecken. Wenn das Motiv bewusst nur im linken oberen Quadranten liegen soll:

.fade-bg-container::before {
    top: 0;
    left: 0;
    width: 60%;
    height: 70%;
}

Dann wird die Bildfläche selbst begrenzt und innerhalb dieses Bereichs maskiert.

11. Cover oder contain?

cover:

  • füllt den definierten Bildbereich vollständig,
  • schneidet bei Bedarf Teile des Motivs ab.

contain:

  • zeigt das komplette Bild,
  • kann freie Bereiche lassen.

Für dekorative Hintergrundbilder ist cover meistens die bessere Wahl.

12. Hintergrundposition steuern

Die Maske kann oben links starten, während das Motiv innerhalb der Bildebene anders positioniert wird:

background-position: 20% top;

Das ist hilfreich, wenn die wichtige Person oder das Objekt nicht direkt am linken Bildrand sitzt.

13. Das 20-Pixel-Padding-Problem

Im ursprünglichen Verlauf hatte der GenerateBlocks-Container einen Innenabstand von 20 Pixeln. Der Text begann also 20 Pixel vom Rand entfernt, das Pseudo-Element dagegen lag mit top: 0; left: 0 direkt an der äußeren Containerkante.

Das ist kein Fehler: absolut positionierte Pseudo-Elemente richten sich am Padding nicht automatisch aus.

14. Bild an denselben Innenabstand wie den Text setzen

Wenn das Bild ebenfalls 20 Pixel Abstand zu allen Seiten haben soll:

.fade-bg-container::before {
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
}

Oder kürzer:

inset: 20px;

Damit beginnt die Bildebene exakt innerhalb des 20-Pixel-Rahmens.

15. Wenn nur links und oben eingerückt werden soll

Vielleicht soll das Bild rechts beziehungsweise unten trotzdem weiterlaufen. Dann:

top: 20px;
left: 20px;
right: 0;
bottom: 0;

Du musst das Pseudo-Element nicht symmetrisch einrücken.

16. Wenn das Bild trotz 20 Pixel Padding zu weit links steht

Prüfe zuerst, auf welchem Container die Klasse sitzt. Bei verschachtelten GenerateBlocks-Containern kann das Padding am inneren Container liegen, während fade-bg-container am äußeren Container sitzt.

Dann beziehen sich Text und Pseudo-Element auf unterschiedliche Boxen.

17. Browser-Inspektor nutzen

Mit Rechtsklick → Untersuchen kannst du sehen:

  • welches Element die Klasse trägt,
  • wo das 20-Pixel-Padding tatsächlich definiert ist,
  • welche Maße ::before besitzt,
  • ob eine andere CSS-Regel Werte überschreibt.

Das ist wesentlich besser, als vorsorglich überall !important einzusetzen.

18. Warum der erste Versuch manchmal gar nichts zeigt

Typische Ursachen:

  • Bild-URL wurde nicht ersetzt.
  • Klasse am falschen Container.
  • Container hat praktisch keine Höhe.
  • Pseudo-Element liegt hinter einem undurchsichtigen Hintergrund.
  • CSS-Datei wird gecacht.
  • Syntaxfehler im vorherigen CSS verhindert die folgende Regel.

19. Container braucht sichtbare Höhe

Wenn sich im Container kaum Inhalt befindet, sollte eine Mindesthöhe gesetzt werden:

min-height: 420px;

In GenerateBlocks kann das direkt unter Sizing erfolgen. Ohne Höhe gibt es möglicherweise schlicht keine große Fläche, auf der das Hintergrundbild sichtbar werden könnte.

20. Nicht automatisch mit !important „reparieren“

Im ursprünglichen Verlauf wurde nach einem wirkungslosen ersten Versuch sehr viel !important ergänzt. Das kann einen Konflikt überstimmen, ist aber kein guter Standard.

Bei einem Pseudo-Element gibt es normalerweise keine GenerateBlocks-Inline-Eigenschaft, die exakt dieselbe Maske definiert. Wenn die Regel nicht greift, ist Klasse, URL, Cache oder Elementstruktur wahrscheinlicher als fehlende CSS-Spezifität.

21. Inhalt sicher über dem Bild halten

Die robusteste Ebenenstruktur:

.fade-bg-container {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fade-bg-container::before {
    z-index: -1;
}

Alternativ Bild auf z-index: 0 und Kinder auf z-index: 1. Entscheidend ist, dass die dekorative Ebene keine Links oder Buttons überdeckt. Deshalb gehört zusätzlich:

pointer-events: none;

auf das Pseudo-Element.

22. Responsive Größe des Bildbereichs

Auf Desktop kann das Motiv beispielsweise 60 Prozent Breite einnehmen. Auf dem Smartphone ist eine eigene Einstellung sinnvoll:

@media (max-width: 767px) {
    .fade-bg-container::before {
        width: 100%;
        height: 55%;
        opacity: .30;
    }
}

So wird der Text auf kleinen Displays nicht von einem zu dominanten Hintergrundmotiv bedrängt.

23. Maske auf Mobil früher auslaufen lassen

@media (max-width: 767px) {
    .fade-bg-container::before {
        -webkit-mask-image: radial-gradient(ellipse at top left, #000 0%, rgba(0,0,0,.7) 25%, transparent 60%);
        mask-image: radial-gradient(ellipse at top left, #000 0%, rgba(0,0,0,.7) 25%, transparent 60%);
    }
}

Der Textbereich bleibt dadurch ruhiger.

24. Container-Hintergrundfarbe bleibt wichtig

Eine Maske macht das Bild transparent. Was dahinter sichtbar wird, bestimmt der Container. Beispiel:

.fade-bg-container {
    background: #f5f5f5;
}

Das Bild läuft dann optisch in Hellgrau aus. Auf einem dunklen Container entsprechend in Dunkelgrau oder Schwarz.

25. Verlauf in eine bestimmte Farbe statt in Transparenz

Wenn das Bild nicht wirklich transparent werden muss, sondern nur in eine feste Hintergrundfarbe übergehen soll, kann auch ein Overlay-Gradient einfacher sein. Beispiel bei weißem Hintergrund:

.fade-bg-container::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, transparent 0%, transparent 35%, #fff 78%);
    pointer-events: none;
}

Die Maskenvariante ist flexibler, wenn der darunterliegende Hintergrund variabel ist.

26. background-attachment: fixed ist ein anderer Effekt

Wenn du tatsächlich ein Bild meinst, das beim Scrollen im Browser stehen bleibt, lautet die CSS-Eigenschaft:

background-attachment: fixed;

Das erzeugt einen Parallax-artigen Effekt, hat aber auf Mobilgeräten historisch Einschränkungen und kann je nach Browser sowie Bildgröße ungünstig für die Performance sein. Für den hier beschriebenen Eck-Auslauf wird diese Eigenschaft nicht benötigt.

27. Eine saubere Komplettversion

.fade-bg-container {
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
}

.fade-bg-container::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60%;
    height: 70%;
    background: url('/wp-content/uploads/dein-bild.jpg') top left / cover no-repeat;
    opacity: .55;
    -webkit-mask-image: radial-gradient(ellipse at top left, #000 0%, rgba(0,0,0,.8) 35%, transparent 75%);
    mask-image: radial-gradient(ellipse at top left, #000 0%, rgba(0,0,0,.8) 35%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.fade-bg-container > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .fade-bg-container::before {
        width: 100%;
        height: 58%;
        opacity: .35;
    }
}

28. Diese Werte kannst du gezielt verändern

  • width/height: Größe der Bildfläche.
  • top/left: Abstand zum Container-Rand.
  • background-position: Bildausschnitt.
  • opacity: allgemeine Bildstärke.
  • 35%: Bereich, in dem das Bild noch deutlich sichtbar ist.
  • 75%: Punkt, an dem der Auslauf vollständig transparent ist.
  • circle/ellipse: Form des Auslaufs.

Fazit

Ein oben links verankertes, weich auslaufendes Hintergrundbild lässt sich in GeneratePress/GenerateBlocks zuverlässig über ein Pseudo-Element mit CSS-Maske umsetzen. GenerateBlocks übernimmt weiterhin Container, Abstände und Inhalt; das CSS steuert nur die spezielle Bildwirkung. Besonders wichtig ist die Trennung zwischen Container-Padding und absolut positionierter Bildebene: Soll das Bild mit einem 20-Pixel-Innenabstand beginnen, muss dieser Abstand auch dem Pseudo-Element gegeben werden. Mit opacity, Masken-Stopps, Größe und Position lässt sich der Effekt sehr fein kontrollieren.