Nov 07

CSS3 background-image • Mehr als ein Hintergrundbilder

Durch einfaches Auflisten setzt CSS3 mehrere Hintergrundbilder in einen Block.

Die Hintergrundbilder werden als Komma-getrennte Liste angegeben. Auch die weiteren Eigenschaften des Hintergrunds werden durch Kommas getrennt in einer Liste aufgeführt: background-position, background-repeat, …

Das können die moderenen Browser schon lange und ohne Browser-Präfix. Auch Internet Explorer 9 …

Jedes Hintergrundbild bildet eine Ebene. Zuoberst liegt das zuerst aufgeführte Bild, die folgenden Bilder liegen jeweils eine Ebene tiefer. 

background: background: url(blaetter.png), url(img/farbmodelle.png);
            background-position: left top, left bottom;
            background-repeat: repeat-x;

Wenn die einzelnen Werte für die übrigen Eigenschaften nicht aufgeführt werden, gilt die Voreinstellung. Wird für einen Stil – z.B. background-position – nur ein Wert aufgeführt, wird der Stil für alle weiteren Hintergrundbilder wiederholt.

Wenn die Kurzschrift background verwendet wird, können die Werte für weitere Eigenschaften direkt hinter der url-Komponente eingetragen werden.

Farbraum auf farbe.wisotop.de

Das spart viele Zeilen HTML- und CSS-Code und ist flexibler als ineinander verschachtelte Blöcke. Wenn der Block länger wird, wandert auch das zweite Hintergrundbild automatisch nach unten.