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 zuletzt angegebene Hintergrund ganz hinten. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.
Mehrere Hintergründe werden als durch Kommas getrennte Liste angegeben, zum Beispiel background: background1, background2, ...;. Diese Syntax wird sowohl von der Kurzform 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 sind drei Hintergründe gestapelt: 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 (zuerst innerhalb von background-image aufgeführt) oben, direkt über der Grafik der Blasen und anschließend der Gradient (zuletzt aufgeführt) unter allen vorherigen 'Bildern'. Jede nachfolgende Untereigenschaft (background-repeat und background-position) bezieht sich auf die entsprechenden Hintergründe. Daher gilt der zuerst aufgeführte Wert von background-repeat für den ersten (vordersten) Hintergrund usw.