Verwendung von mehreren Hintergründen

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 im Hintergrund liegt. Nur der letzte Hintergrund kann eine Hintergrundfarbe enthalten.

Das Definieren mehrerer Hintergründe ist einfach:

css
.myclass {
  background:
    background1,
    background2,
    /* …, */ backgroundN;
}

Sie können dies sowohl mit der Kurzform-Eigenschaft background als auch mit den individuellen Eigenschaften tun, mit Ausnahme von background-color. Das bedeutet, dass die folgenden Hintergrundeigenschaften als Liste angegeben werden können, eine pro Hintergrund: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

Beispiel

In diesem Beispiel werden drei Hintergründe übereinandergestapelt: das Firefox-Logo, ein Bild mit Blasen und ein lineares Farbverlauf:

HTML

html
<div class="multi-bg-example"></div>

CSS

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%), rgb(255 255 255 / 0%));
  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 (das zuerst innerhalb von background-image aufgeführt wurde) oben, direkt über der Grafik mit den Blasen. Darunter folgt der Farbverlauf (zuletzt aufgeführt), der sich unterhalb aller vorhergehenden 'Bilder' befindet. Jede nachfolgende Untereigenschaft (background-repeat und background-position) wird auf die entsprechenden Hintergründe angewendet. Das bedeutet, dass der zuerst angegebene Wert für background-repeat auf den ersten (vordersten) Hintergrund angewendet wird und so weiter.

Siehe auch