Lesefortschritt:

Divi-Standard-Header mit Hintergrundbild aufhübschen

30. Juli 2025 | CSS-Stylesheet, Divi-Theme

Trick # 481 | Dieser Beitrag beinhaltet 404 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Der Standard-Header des Divi-Themes lässt sich mit einem Hintergrundbild versehen. So wie im Kopf dieses Beitrags. Das geht mit ein wenig CSS-Code ganz einfach.

Für unseren Hintergrund im Divi-Header haben wir dieses Bild ausgewählt:

 

Die Bildauswahl ist ob des schmalen Formats freilich nicht ganz einfach, wie Sie bestimmt bemerken werden. Wir haben darum einen Ausschnitt gewählt, welcher den Horizont zeigt. Zusätzlich haben wir das Bild ein wenig aufgehellt.

Umso einfacher ist derweil die Platzierung. Kopieren Sie dafür den folgenden Code ins CSS-Stylesheet Ihrer Divi-Website. Unter Design/Customizer/Zusätzliches CSS:

#main-header {
background-size: initial;
background-repeat: repeat;
background-image: url(https://ihredomain.ch/pfad-zu-ihrem-bild.jpg) !important;
}

Anpassen müssen Sie den Pfad zum gewünschten Bild. Sie finden den entsprechenden Platzhalter in Zeile 4 des CSS-Codes.

Werbung

Header des Divi-Themes ausblenden

Das Divi-Theme blendet von Haus aus einen Header ein. Darin erscheint etwa das Menu und zusätzlich noch ein Logo. Ab und an möchte man aber diesen Standard-Header vollständig ausblenden - etwa auch, um ihn zu ersetzen. Wie das geht, zeigen wir ...
Keine Inhalte gefunden.

Werbung

 

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.