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 letzte im Hintergrund. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.
Mehrere Hintergründe werden als kommagetrennte Liste angegeben, zum Beispiel background: background1, background2, ...;. Diese Syntax wird sowohl von der Kurzform background 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 geschichtet: das Firefox-Logo, ein Bild von Blasen und ein linearer Gradient:
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 (an erster Stelle innerhalb von background-image aufgeführt) oben, direkt über der Blasengrafik, gefolgt von dem Farbverlauf (als letztes aufgeführt), der unter allen vorhergehenden 'Bildern' liegt. Jede nachfolgende Untereigenschaft (background-repeat und background-position) gilt für die entsprechenden Hintergründe. Somit gilt der erste aufgeführte Wert von background-repeat für den ersten (vordersten) Hintergrund und so weiter.