mehrere Hintergrundbilder – Anwendungsbeispiele

Mit der background Eigenschaft in CSS3 und mehreren Hintergrundbildern lässt sich prima spielen! Hier ist Phantasie gefragt und grafisches Verständnis. Beides nicht unbedingt Bereiche in denen ich richtig glänzen kann, dennoch habe ich heute einmal zwei recht einfache Beispiele mitgebracht.

Schaut euch den Quelltext an (ich habe die Style-Angaben in die HTML-Datei geschrieben), 2 recht einfach und schnell umzusetzende (Start-)Seiten.

Im ersten Beispiel habe ich insgesamt 3 Hintergrundbilder verwendet, die ich teilweise vorher freigestellt hatte. Mich, den Mond und den Rasen. Der Esel nennt sich immer zuletzt, ich weiss, aber ich habe das hier extra so geschrieben, weil die Bilder auch tatsächlich so angeordnet sind und das zuletzt genannte von den anderen bei Überschneidung überlagert wird.

http://www.css3.de/spielwiese/background/001/index.html

spielwiesse-001

Im zweiten Beispiel habe ich nur 2 Hintergrundbilder benutzt, dafür zusätzlich die Eigenschaft „transform“ für den Text recht unten „hochkant“:

den „I-Punkt“:
i-punkt

und den „Tapetenhintergrund“:
bg

http://www.css3.de/spielwiese/background/002/index.html

spielwiesse-002

Da ist viel Potential drin. Bringt man zu den multiple backgrounds eigene Grafiken und auch noch andere nette CSS3-Eigenschaften ins Spiel, hat man schnell eine individuelle Seite, die man toll z. B. als Startseite etc. benutzen kann.

Und das „coole“ an der Sache: es macht auch noch Spass!