Mehrere Hintergründe in CSS verwenden

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;
}

<div class="multi_bg_example"></div>

.multi_bg_example {
  width:100%;
  height:400px;
  background: url(https://mdn.mozillademos.org/files/11305/firefox.png),
            url(https://mdn.mozillademos.org/files/11307/bubbles.png),
  -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
  -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
  -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)),
  linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
}

Ergebnis

Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Farbverlauf, welcher wiederum auf dem Hintergrund mit Blasen 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

• Verwendung von CSS Farbverläufen