Trick # 618 | Dieser Beitrag beinhaltet 0 Wörter. – Geschätzte Lesezeit: ca. 0 Minuten.
Die Erstellung einer visuell innovativen Webseite mit dem Divi-Theme bedeutet, dass manchmal auch Hintergrundbilder für bestimmte Effekte angepasst werden müssen. In diesem Beitrag führen wir Sie durch den Prozess, wie Sie ein Hintergrundbild teilweise überdecken können, ohne dass umfangreiche Redesign-Arbeiten erforderlich sind.
So sieht eine Divi-Sektion mit einem Hintergrundbild im Normalfall aus:
Das Bild wird im ganzen Sektionshintergrund dargestellt - darüber ist hier ein Text-Modul gelegt.
Und so soll es aussehen:
Das Bild im Hintergrund wird zur Hälfte (hier dunkelblau) überdeckt.
Dafür benötigen Sie ein paar Zeilen CSS-Code. Diesen kopieren Sie in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS:
.halve-background {
background-size: cover;
background-position: 25vw !important;
}
.halve-background::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 50%;
background-color: inherit;
}Noch zwei weitere Schritte sind nötig:
- Der Sektion weisen Sie noch die Klasse «halve-background» hinzu. Öffnen Sie dazu den «Advanced»-Tab der Sektion, wechseln auf «CSS-ID und Klassen» und fügen Sie den Namen «halve-background» in das Textfeld «CSS-Klassen» ein.
- Weiter müssen Sie der Sektion noch die gewünschte Hintergrundfarbe zuweisen. Das ist im Tab «Inhalt» möglich – wenn Sie keine besondere Farbe (in unserem Beispiel das dunkle Blau) zuweisen, wird das halbe Bild standardmässig mit weisser Farbe abgedeckt.
Voilà – That's it. Ein kleiner, adretter Darstellungseffekt.
Werbung
Werbung
