Verwenden von mehreren Hintergründen
Sie können mehrere Hintergründe auf Elemente anwenden. Diese werden übereinander gelagert, wobei der erste von Ihnen angegebene Hintergrund oben und der letzte Hintergrund, der aufgelistet ist, im Hintergrund liegt. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.
Mehrere Hintergründe werden als kommagetrennte Liste angegeben, wie z. B. background: background1, background2, ...;. Diese Syntax wird sowohl von der Kurzform background-Eigenschaft als auch von den einzelnen Eigenschaften außer 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 übereinander 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, befindet sich das Firefox-Logo (zuerst innerhalb von background-image aufgeführt) oben, direkt über der Blasengrafik, gefolgt vom Verlauf (zuletzt aufgeführt), der unter allen vorhergehenden 'Bildern' liegt. Jede nachfolgende Sub-Eigenschaft (background-repeat und background-position) bezieht sich auf die entsprechenden Hintergründe. Der erste aufgeführte Wert für background-repeat wird also auf den ersten (vordersten) Hintergrund angewendet, und so weiter.