Multiple Hintergrundbilder (Background Images)

CSS3 bietet die Möglichkeit für Elemente mehrere Hintergrundbilder zu definieren. Bisher galt die Regel: ein Bild pro Element.

Die Hintergrundbilder werden Komma getrennt nacheinender angeortnet. Die Reihenfolge der aufgerufenen Hintergrundbilder definiert die Überlagerung der Bilder. An erster Stelle liegt das zuerst aufgeführte Bild, die folgenden Bilder liegen eine Ebene tiefer.

Syntax Beispiel

.multi-bgs {
 background:url(dots/1.png) no-repeat left top,
 url(dots/2.png) no-repeat fixed left bottom,
 url(dots/3.png) no-repeat fixed center center,
 url(dots/4.png) no-repeat right top,
 url(dots/5.png) no-repeat fixed right bottom;
 background-color: #ddd;
 }