Beitragsbild als Background nutzen
Ein Artikelbild kann nicht nur für die Anzeige innerhalb von Beiträgen bzw. als Thumbnail genutzt werden, sondern auch als Hintergrundbild für den ganzen Blog. So etwas kann tatsächlich sehr schick aussehen, vor allem wenn dabei gezielt mit Blur-Effekten gearbeitet wird. Statt dem normalen Hintergrund, den ihr direkt in der CSS-Datei festlegt, wird dann das Artikelbild gestreckt, leicht verwischt und so als stilvoller Background genutzt. Doch ganz so einfach wie das klingt ist es natürlich wieder nicht, denn erst einmal muss das Artikelbild ausgelesen werden und dann sollte es den vorhandenen Body-Background noch überschreiben bzw. korrekt überlagern. Das ist eine kleine Fummelei und muss unter Umständen, je nach CSS-Regeln, hier und da noch dezent angepasst werden. Ihr könnt euch den Ärger aber sparen, denn ich habe mal ein Snippet für euch vorbereitet. Das erzeugt eine Pseudoklasse für den Body-Tag und integriert dort das jeweilige Artikelbild. Anschließend wird es mit dem CSS3-Filter noch verwischt. Ganz einfach und für jeden Laien verständlich umgesetzt, denke ich mal.
Folgendes vor das <body> in die header.php kopieren:
<?php $src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID)); ?>
<style>body:before{content:"";background:url(<?php echo $src[0]; ?>) no-repeat center/cover;height:100%;width:100%;top:0;filter:blur(10px);position:fixed;z-index:-9999}</style>
Artikelbild als CSS Background
Im Kern ist das Snippet oben sehr einfach angelegt. Erst wird das jeweilige Thumbnail für den Artikel gesucht, dann wird das Bild via einfachem CSS-Code direkt vor den Body-Tag eingefügt, via Pseudoklasse “body:before”. Das ermöglicht die einfache Überlagerung, während der Body seinen normalen Background behalten darf. Wer möchte und sich auskennt, kann den Code natürlich noch frei anpassen und erweitern, gerade der CSS-Teil kann nach belieben verändert oder modifiziert werden. So könntet ihr den Blur verstärken oder auch ganz abschalten, wobei das oft zu pixeligen Bildern führt, da der Background entsprechend groß ist und Beitragsbilder meist eher klein. So oder so ist mit dem Code einiges möglich und er stellt eine einfache und recht simple Lösung dar, die jeder Anfänger direkt kopieren und verwenden kann, um das jeweilige Artikelbild automatisch als Hintergrund für den Blog zu verwenden.
2 Antworten
Hey
Ich habe das gemacht und es funktioniert super. Nur lädt jetzt die Seite so lange, wie kann ich das noch verbessern?
VG Kerstin
Also wenn es sich um die Seite handelt die du bei deinem Kommentar angegeben hast, dann ist das auch kein Wunder. Dein BG Bild ist fast 20MB groß, das sollte es natürlich nicht sein 🙂