Mit CSS3 können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.

Mehrere Hintergründe festzulegen ist einfach:

.myclass {
  background: background1, background 2, ..., backgroundN;
}

Du kannst dies mit beiden Varianten, der verkürzten background Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser background-color. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt 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 übereinandergelegt: das Firefox Logo, ein linearer Farbverlauf und ein Bild mit Blasen:

.multi_bg_example {
  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
                    url(https://mdn.mozillademos.org/files/11307/bubbles.png),
                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));

  background-repeat: no-repeat,
                     no-repeat,
                     no-repeat;

  background-position: bottom right,
                       left,
                       right;
}

Ergebnis

Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft (background-repeat und background-position) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für background-repeat für den ersten (vordersten) Hintergrund und so weiter.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: benmann, teoli, Sebastianz, srhjg
Zuletzt aktualisiert von: benmann,