Willkommen zum zweiten Teil der CSS3 im Detail-Reihe!

Diesmal geht es um die Möglichkeit einem Element mehrere Hintergrundbilder zu vergeben. Bisher war es nur möglich 1 Bild pro Element als Hintergrund zu definieren. Wollte man mehr, mussten sogenannte Wrapper um das Element gesetzt werden. Das verursacht unnötiges Mark-up, was vielen schon lange ein Dorn im Auge war. Das zusätzliche Mark-up war sicherlich auch einer der Hauptgründe für die Einführung von Multiple Backgrounds.

Browserunterstützung

Folgende Browser unterstützen diese Technik bereits vollständig:

Syntax

Damit man die neue Technik nutzen kann, muss man lediglich mehrer URLs, das Attachment und die Position des Bildes in die background-Anweisung schreiben.

1
2
3
4
5

div.multiple_bgs {
	background:url(example_1.jpg) no-repeat left top,
	url(example_2.jpg) no-repeat right bottom,
	url(example_3.jpg) no-repeat center center #adf;
}

Anwendungen

Ein gutes Beispiel ist mein Blog. Für die Darstellung des Contents benötige ich 3 Grafiken: den oberen Bereich, den Mittelteil und den unteren Bereich. Natürlich musste ich dafür 2 Wrapper um den eigentlich Content legen. Diese könnten entfallen, wenn ich Multiple Backgrounds nutzen würde.

Update: Mittlerweile mach ich das auch.

Vor- und Nachteile

Durch den Wegfall des zusätzlichen Mark-ups wird der Code etwas schlanker und semantisch korrekter.

Für den IE und Opera gibt es derzeit noch keine Lösungen oder Alternativen, von daher ist die Technik noch relativ unpraktikabel.

Fazit

Multiple Backgrounds lohnt sich nur an Stellen, die nicht so wichtig sind oder wenn man seine Leserschaft genau kennt und weiß, dass davon die meisten mit Firefox/Safari/Chrome unterwegs sind.

Viel Spaß beim Basteln! Wir sehen uns beim nächsten Mal.