CSS3 – mehrere Hintergrundbilder für ein HTML-Element

Mit CSS3 ist es möglich, mehrere Hintergrundbilder für ein HTML-Element zu definieren. Die Vorgehensweise dabei? Eigentlich die gleiche, wie man ein einzelnes Hintergrundbild definieren würde, außer das man nun die verschiedenen Hintergrundbilder (und ggf. die Werte zusätzlicher Eigenschaften) mit einem Komma (“,”) trennt.

Also statt “normal” (ein HG-Bild):
background: url(image) no-repeat top left;

verwendet man z. B.:
background: url(image1) no-repeat top left, url(image2) no-repeat bottom left, url(image3 no-repeat top right, url(image4) no-repeat bottom right;

oder, wenn man nicht die Kurzschrift benutzt:
background-image: url(image1, url(image2), url(image3), url(image4);
background-repeat: no-repeat;
background-position: top left, bottom left, top right, bottom right;

Ist hierbei eine Eigenschaft nur einmal aufgeführt, gilt sie für alle angesprochenen Hintergrundbilder.

In der Reihenfolge liegen die Bilder, wie sie in der Eigenschaft aufgeführt sind, will sagen, das zuerst Genannte liegt oben und überlagert alle anderen bei Überschneidung, das an zweiter Stelle genannte darunter, (…) das Vierte ganz unten. Hier eine Grafik dazu:

multiple-background

Natürlich habe ich auch wieder ein Demonstrationsbeispiel angelegt:

CSS3 – mehrere Hintergrundbilder für ein HTML-Element

Kommentar (1)

  1. Pingback: mehrere Hintergrundbilder – Anwendungsbeispiele | CSS3.de

Kommentare sind geschlossen.