Multiple Backgrounds in CSS 3

CSS3 erlaubt die Verwendung mehrerer Hintergrundbilder (multiple backgrounds). Dazu werden den entsprechenden CSS-Eigenschaften einfach mehrere durch Kommata von einander getrennte Werte übergeben.

Die Hintergrundgrafiken werden dabei in umgekehrter Reihenfolge, in der sie genannt werden, übereinander gestapelt, also die erste Grafik liegt ganz oben.

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

id.multiple_backgroung {
	background:url(img1.jpg) no-repeat 0 0,
	url(img2.jpg) no-repeat right bottom,
	url(img3.jpg) no-repeat center center;

• Zuerst kommt der flächendeckende Verlauf
• wird die Grafik einer Fliege referenziert, die mittels no-repeat nur einmal angezeigt und links mittig positioniert
• wird zum Schluss kommt eine Wolke, die mit repeat-x horizontal gekachelt wird.

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Hintergrund