CSS multiple backgrounds – Einem HTML-Element mehrere Hintergründe zuweisen

Mit CSS könnt Ihr einem HTML-Element mehrere Hintergrundbilder-, farben oder -verläufe zuweisen. Ihr erreicht somit eine komplexere Gestaltung, bei gleichzeitig schlankem HTML-Markup. Wie Ihr Multiple Backgrounds umsetzt, zeige ich euch in diesem Beitrag an einem Beispiel mit drei Hintergrundbildern.

Die CSS-background-Eigenschaft dient als Grundlage

Das mit dem CSS-Befehl background-image:url(…) einem Element ein Hintergrundbild zugewiesen werden kann, ist wahrscheinlich bekannt. Das folgende Beispiel weist dem <body>-Element ein Bild zu, positioniert es links oben und verhindert die Wiederholung:

body {
  background-image: url(sonne.png);
  background-position: top left;
  background-repeat: no-repeat;
}

Mehrere Hintergrundbilder verwenden

Für das Einbinden weiterer Bilder fasse ich die CSS-Eigenschaften background-image, background-position und background-repeat nun in der übersichtlicheren Kurzschreibweise background zusammen. Jetzt füge ich ein zweites Bild hinzu, indem ich nach dem ersten ein Komma setze. Beide Bilder positioniere ich, indem ich die X- und Y-Koordinaten festlege:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat
    ;
}

Beispiel anschauen

Nun möchte ich dem Himmel eine zweite Wolke geben. Dazu kopiere die letzte Bildzeile und füge diese nach einem weiteren Komma wieder ein. Die Positionierung erfolgt wieder über X- und Y-Koordinaten bis es gestalterisch passt:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat,
    url(wolke.png) 870px 120px no-repeat
    ;
}

Beispiel anschauen

Mit background-repeat ein Hintergrundbild wiederholen

Das dritte Hintergrundbild ist eine Wiese, die ich unten im Browserfenster über die gesamte Breite anzeigen lassen möchte. Das wird erreicht, indem das Bild wiese.png auf der X-Achse gekachelt wird:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat,
    url(wolke.png) 870px 120px no-repeat,
    url(wiese.png) bottom repeat-x
    ;
}

Beispiel anschauen

Einen Verlauf (CSS Gradient) hinzufügen

Mit CSS kann man nicht nur mehrere Hintergundbilder für ein Element miteinander kombinieren, sondern auch Verläufe. Um den Himmel zu gestalten, erhält der <body> jetzt einen Verlauf mit der CSS-Eigenschaft linear-gradient. Dafür setze ich wieder ein Komma nach der letzten Bildzeile und ergänze den Verlauf. In meinem Beispiel möchte ich, dass ein linearer Verlauf oben mit der Farbe Hellblau (lightblue) beginnt und nach unten in Weiß (white) übergeht. Dafür verwende ich in diesem Beispiel die CSS Standard Syntax für Verlaufe:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 990px 100px no-repeat,
    url(wolke.png) 870px 120px no-repeat,
    url(wiese.png) bottom repeat-x,
    linear-gradient(lightblue, white)
    ;
}

Beispiel anschauen

Multiple Backgrounds werden gestapelt

Jedes Hintergrundbild liegt auf einer separaten Ebene; ganz oben liegt das im Code zuerst notierte Bild. Veranschaulichen lässt sich das Prinzip, indem ich die erste Wolke über die X- und Y-Koordinaten unter die Sonne schiebe:

body {
  background:
    url(sonne.png) 20px 20px no-repeat,
    url(wolke.png) 100px 20px no-repeat,
    url(wolke.png) 870px 120px no-repeat,
    url(wiese.png) bottom repeat-x,
    linear-gradient(lightblue, white)
    ;
}

Beispiel anschauen

Die Reihenfolge der Bilder lässt sich natürlich beliebig verändern, je nachdem welches Objekt überlappt werden soll. Bitte beachtet jedoch, dass einfarbige Hintergründe immer in der untersten Ebene liegen müssen! Andernfalls wird der Hintergrund nicht dargestellt.

/* falsch */
div {
  background: red, url(bild1.jpg), url(bild2.jpg);
}

/* falsch */
div {
  background: url(bild1.jpg), red, url(bild2.jpg);
}

/* richtig */
div {
  background: url(bild1.jpg), url(bild2.jpg), red;
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the multibackgrounds feature across the major browsers from caniuse.com

Geschrieben von kulturbanause Team

Benutzerbild

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 4 Kommentare

  1. Anne Eggmann
    schrieb am 18.02.2019 um 20:54 Uhr:

    Hallo und herzlichen Dank für die wertvollen Infos! Nun habe ich aber immer noch ein Problem: Ein dreigeteilter background (3 halbtransparente pngs), der einen Rahmen mit unregelmssigen Kanten darstellt. Alle drei Teile haben die volle DIV-Breite, der obere und der untere background sind auf no-repeat gesetzt und der mittlere sollte sich in der y-Achse solange wie nötig (ist bei jeder Unterseite je nach Textmenge anders) in der Höhe wiederholen, aber erst unterhalb des ersten backgrounds anfangen und oberhalb des unteren backgrounds aufhören, also nicht überlappend sein. Habt Ihr eine Idee, wie ich es lösen könnte? Danke Euch ganz herzlich im voraus!!

    Antworten
    • Jonas Hellwig
      schrieb am 18.02.2019 um 21:09 Uhr:

      Hallo Anne, vielen Dank für deinen Kommentar. Die Wiederholung des mittleren Bildes nur über einen bestimmen Bereich (also oben und unten nicht wiederholen, in der Mitte schon) ist meiner Ansicht nach nicht in einem einzelnen Element möglich. Alternativ arbeitest du mit ::before und ::after oder versuchst es mit border-images. Ich würde border-images eine Chance geben. Das klingt für mich wie ein klassischer Anwendungsfall dafür. Der Browser-Support ist gut (IE11+).

      Antworten
      • Anne Eggmann
        schrieb am 19.02.2019 um 11:29 Uhr:

        Hallo Jonas
        Toll, danke Dir! Ich versuche mich mal darin und werde nicht locker geben, bis es klappt ;-) . before und after fruchteten leider nicht…

  2. Jörg Zimmermann
    schrieb am 25.02.2018 um 21:46 Uhr:

    Toller Artikel und danke. Mir war neu das mehrere Hintergrundbilder in einem Bereich möglich sind. Auch sonst lese ich gerne hier.
    Bei den Bilder empfehle ich .png, dann kann mit transparenzen auch mal eine Überlagerung möglich sein.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →