Verwendung mehrerer Hintergründe
Sie können mehrere Hintergründe auf Elemente anwenden. Diese werden übereinander geschichtet, wobei der erste von Ihnen angegebene Hintergrund oben liegt und der zuletzt aufgeführte Hintergrund im Hintergrund ist. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.
Mehrere Hintergründe werden als kommagetrennte Liste angegeben, wie zum Beispiel background: hintergrund1, hintergrund2, ...;. Diese Syntax wird sowohl von der Kurzform der background-Eigenschaft als auch von deren einzelnen Eigenschaften akzeptiert, mit Ausnahme von background-color: background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
Beispiel
In diesem Beispiel sind drei Hintergründe gestapelt: das Firefox-Logo, ein Bild von Blasen und ein lineares Gradientenbild:
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 aufgeführt) oben, direkt über dem Blasenbild, gefolgt vom Gradienten (zuletzt aufgeführt), der unterhalb aller vorhergehenden 'Bilder' liegt. Jede nachfolgende Untereigenschaft (background-repeat und background-position) gilt für die entsprechenden Hintergründe. Der zuerst aufgeführte Wert für background-repeat gilt also für den ersten (vordersten) Hintergrund, und so weiter.