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-repeatnur einmal angezeigt und links mittig positioniert - wird zum Schluss kommt eine Wolke, die mit
repeat-xhorizontal gekachelt wird.