Verwendung mehrerer Hintergründe
Sie können mehrere Hintergründe auf Elemente anwenden. Diese werden übereinander geschichtet, wobei der erste angegebene Hintergrund oben liegt und der letzte in der Liste hinten. Nur der letzte Hintergrund kann eine Hintergrundfarbe beinhalten.
Mehrere Hintergründe werden als durch Kommas getrennte Liste spezifiziert, wie background: background1, background2, ...;. Diese Syntax wird sowohl von der Kurzschreibweise der background-Eigenschaft als auch von den einzelnen Eigenschaften mit Ausnahme von background-color akzeptiert: background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
Beispiel
In diesem Beispiel werden drei Hintergründe gestapelt: das Firefox-Logo, ein Bild von Blasen und ein linearer Verlauf:
HTML
<div class="multi-bg-example"></div>
CSS
.multi-bg-example {
width: 100%;
height: 400px;
background-image:
url("firefox.png"), url("bubbles.png"),
linear-gradient(to right, rgb(30 75 115 / 100%), transparent);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:
bottom right,
left,
right;
}
Ergebnis
Wie Sie hier sehen können, ist das Firefox-Logo (zuerst innerhalb von background-image aufgelistet) oben, direkt über der Blasengrafik, gefolgt von dem Verlauf (zuletzt aufgelistet), der unter allen vorherigen 'Bildern' liegt. Jede nachfolgende Untereigenschaft (background-repeat und background-position) wird auf die entsprechenden Hintergründe angewendet. Der zuerst aufgelistete Wert für background-repeat gilt also für den ersten (vordersten) Hintergrund, und so weiter.
Wertwiederholung für mehrere Hintergründe
Bei der Verwendung mehrerer Hintergründe, wenn einer hintergrundbezogenen Eigenschaft weniger durch Kommas getrennte Werte zugewiesen sind als die Anzahl der Hintergrundebenen, wiederholt der Benutzeragent die Werteliste, bis genügend Werte für alle Ebenen vorhanden sind.
Zum Beispiel:
.element {
background-image: url(a.png), url(b.png), url(c.png);
background-position: left top;
}
Dies ist gleichbedeutend mit:
.element {
background-position:
left top,
left top,
left top;
}