Zufälliges Hintergrund-Bild und Farbe für Blog und Webseite
pEtEr Withoutfield am Donnerstag, 4. Juni 2009, 18:51 UhrTags: Anleitung, Bilder, Blog, CSS, Design, Photoshop, Tutorial, Wordpress
Abgelegt unter: Sehbar
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.
*klugscheissmodus an*
die style anweisung kann man auch noch etwas komprimieren.
position: relative; – gibt es in diesem fall nicht
background-attachment: scroll; – ist per default schon eingestellt
und den rest kann man in einer anweisung hintereinander packen.
html {
background:<?php echo $bgimg_array[0][1] ?> url(<?php echo $bgimg_array[0][0] ?>) no-repeat;
}
*klugscheissmodus aus*
Hast natürlich vollkommen Recht. Habe position und attachment raus genommen, lasse aber die Anweisung unkomprimiert. Ich denke, dass es für Laien so einfacher zu verstehen ist.
Und übrigens finde ich nicht, dass dein Kommentar was mit Klugscheißen zu tun hat, eher mit Unterstützung und Hilfe.
Vielen Dank dafür! ;D
da bin ich ja froh, dass es auch so angekommen ist, wie es gemeint war
und für die laien ist es in der tat besser die anweisung unkompromiert zu lassen.
Mir ist aufgefallen, dass im Safari kein Hintergrundbild und auch keine Farbe dargestellt wird! Ist das bei euch auch so und hat evtl. jemand eine Idee warum das nicht funktioniert?
Kann es sein, dass das Safari-Browser keinen php-Code im ausführt?
bei der style anweisung fehlt die schliessende geschweifte klammer.
BiGOD, du machst deinem Namen alle Ehre
Da hatte ich wohl Tomaten auf den Augen, vielen vielen Dank für den Hinweis!
hi,
wie ist das gemeint mit “aus der eigentlichen css datei nehmen”? bei mir funktioniert das nämlich nicht ganz so, d.h die bilder werden unter dem footer angezeigt als kleiner balken
oh, funktioniert nun, musste den background aus der css nehmen
aber, mein footer ist jetzt ganz kaputt, könntest du da mal schauen?
http://www.muhjuice.de
funktioniert jetzt, hab was in der index datei zuuviel gelöscht
achja, noch ne frage: wie kann ich den context etwas durchsichtbar machen? also so wie hier..
Hallo Rumpel,
das geht ganz einfach: Du erstellst ein .png, ca. 5 x 5 Pixel und füllst es mit einer Farbe, z.B. mit Weiß wie hier. Dann änderst du die Deckkraft der Farbe auf z.B. 70 Prozent und exportierst das Bild mit Transparenz.
Dieses Bild fügst du dann per CSS in der gewünschten ID oder Klasse als Hintergrund-Image ein:
background-image:url(Pfad/zum/Bild.png);
background-repeat:repeat;
That’s it
hey wollte dein schönes skript probieren . funktioniert in nem normalen index super aber nicht in meinem joomla index . weißt du ob da was kollidiert ? wenn du mal nach schaun magst . http://www.teamgaraventa.de hab den code aktuell nicht drinn aber wenn ich ihn in den head einfüge passiert nichts
Danke. Ich habe ewig nach so etwas gesucht für meine WordPress Webseite! Danke! Funktioniert alles Super!
Hi, bei mir klappt alles prima, doch möchte ich, dass die Hintergrundbilder zentriert werden. Also irgendwie align=”center”.
Irgendwie bekomm ich das nicht hin, kannst du mir helfen?
Hi Chris,
das sollte mit background-position: center; funktionieren.
Hier ein paar mehr Infos zu:
http://www.css4you.de/background-position.html
http://de.selfhtml.org/css/eigenschaften/hintergrund.htm
Cheers