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

Die Angabe mehrerer Hintergründe ist einfach:

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

Dies können Sie mit der Kurzform-Eigenschaft background und den individuellen Eigenschaften, mit Ausnahme von background-color, tun. Das heißt, die folgenden Hintergrund-Eigenschaften können als Liste angegeben werden, 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 gestapelt: das Firefox-Logo, ein Bild von Blasen und ein linearer Verlauf:

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 (zuerst innerhalb background-image aufgeführt) oben, direkt über der Blasengrafik, gefolgt vom Verlauf (zuletzt aufgeführt), der unter allen vorherigen 'Bildern' liegt. Jedes folgende Untereigenschaft (background-repeat und background-position) gilt für die entsprechenden Hintergründe. Daher gilt der zuerst aufgeführte Wert für background-repeat für den ersten (vordersten) Hintergrund usw.

Siehe auch