kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Web Animationen, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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

CSS3 Multiple Backgrounds von allen modernen Browsern (ab IE9) unterstützt. Den detaillierten Browsersupport könnt ihr hier einsehen.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

4 Kommentare

  1. Jörg Zimmermann

    Verfasst am 25. Februar 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.

  2. Anne Eggmann

    Verfasst am 18. Februar 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!!

    • Jonas Hellwig

      Verfasst am 18. Februar 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+).

      • Anne Eggmann

        Verfasst am 19. Februar 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…

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.