
Mit diesem kleinen Tutorial möchte ich zeigen, wie man in einem Blog oder auf einer Webseite wechselnde Hintergrundbilder darstellt und zudem die Hintergrundfarbe anpasst. Also so, wie ich es hier im Blog umgesetzt habe.
Alle Hintergrundbilder, die hier auf Blogrebellen eingebunden sind, wurden zuvor in Photoshop bearbeitet. Neben der eigentlichen Bildgestaltung und der Bildbearbeitung habe ich bei jedem Bild auf der rechten Seite, sowie unten einen Farbverlauf hinzugefügt. Diese, für den Verlauf gewählte Farbe, entspricht der Farbe, die als Hintergrundfarbe für die Webseite genutzt wird. Da die Farbe nach dem Export aus Photoshop leicht von der eigentlich gewählten Farbe abweichen kann, sollte man, z.B mit dem Firefox-Plugin Colorzilla, den Farbwert erneut ermitteln.
Und so funktioniert der automatische Wechsel: Dieses kleines php-Script wird im Head-Template des Wordpress-Themes zwischen <head> und </head> eingefügt:
<style type="text/css">
<?php
// Array init
$bgimg_array=array(
array ("pfand/Bild1.jpg", "#000000"),
array ("pfand/Bild2.jpg", "#030166"),
array ("pfand/Bild3.jpg", "#99CBFE"),
);
//shuffle array
shuffle($bgimg_array);
?>
html {
background-image:url('<?php echo $bgimg_array[0][0] ?>');
background-color:<?php echo $bgimg_array[0][1] ?>;
background-repeat: no-repeat;
}
</style>
In die Arrays in Zeile 5-7 trägt man die URL zum Bild, sowie die Farbe ein. Wer mehr Bilder hat, kopiert einfach ein Array und fügt es unter den vorhanden Arrys ein.
Zeile 11: Der Befehl shuffle ändert zufällig die Reihenfolge der Arrays.
Ab Zeile 13 beginnt die eigentliche CSS-Formatierung. Das Hintergrundbild und die Hintergrundfarbe werden per php automatisch eingefügt. Statt dem html-Element kann man natürlich auch das boby-Element formatieren. Und nicht vergessen, die hier formatierten Elemente aus der eigentlichen CSS-Datei zu nehmen.
Eine Auswahl schöner Fotos und Texturen, die sich hervorragend als Hintergrundbild eignen, findet man z.B. hier, hier oder hier als free Download.