Zufälliges Hintergrund-Bild und Farbe für Blog und Webseite

Von
Peter Withoutfield
-
18

zufaelliges hintergrundbild

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:

[php]
<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>
[/php]

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.

Verwandte ArtikelMehr vom Autor

18 Kommentare

  1. *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* 😉

  2. 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

  3. 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?

  5. BiGOD, du machst deinem Namen alle Ehre 😀
    Da hatte ich wohl Tomaten auf den Augen, vielen vielen Dank für den Hinweis!

  6. 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

  8. 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..

  9. 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 😉

  10. 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

  12. Danke. Ich habe ewig nach so etwas gesucht für meine WordPress Webseite! Danke! Funktioniert alles Super!

  13. 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?

  15. Hi, ist schon etwas her das Thema, aber vielleicht guckst du ja doch nochmal hierher. Probier grade das Hintergrundbild zu wechseln und es will einfach nicht klappen. Benutze ein eigenes WordPress Template.

    html {
    background: url(“) no-repeat;
    }

    Wenn ich es so mache meckert er schon wegen dem bloginfo(„template_directory“) und es kommt beim öffnen der Seite lediglich der Hinweis:
    Parse error: syntax error, unexpected T_STRING, expecting ‚)‘ in /kunden/388221_30449/pages/jlp/wp-content/themes/wp_jlp/header.php on line 19

    zeile 19 ist die erste Array Zeile mit bg1.jpg. Lasse ich den Zusatz bloginfo weg, wird einfach weißer Hintergrund erzeugt aber kein Bild angezeigt.

    Wäre super wenn du helfen kannst!
    Viele Grüße, Jan

  17. […] wieder mal ein bisschen am Design der Blogrebellen herum geschraubt. Neben neuen Light-Writing-Hintergrundbildern (alle unter Creative-Commons-Lizenz, siehe weiter unten) gibt es nach ausdrücklichem Wunsch von […]

Kommentarfunktion ist geschlossen.