CSS - Multiple Backgrounds

Hallo zusammen, angehende Webdesigner! Heute tauchen wir ein in die aufregende Welt der CSS-Mehrfachhintergründe. Als dein freundlicher Nachbarschafts-EDV-Lehrer bin ich hier, um dich auf diesem Weg mit vielen Beispielen und Erklärungen zu führen. Also hol dir dein liebstes Getränk und los geht's!

Syntax

Bevor wir ins tiefe Wasser springen,fangen wir mit den Grundlagen an. Die Syntax für die Verwendung von mehreren Hintergründen in CSS ist recht einfach:

auswahl {
background: hintergrund1, hintergrund2, ..., hintergrundN;
}

Jeder Hintergrund wird durch ein Komma getrennt und sie werden von erstem bis letztem übereinandergelegt. Der erste Hintergrund, den du aufzählst, wird oben sein, und der letzte wird unten sein. Das ist wie das Stapeln von Pfannkuchen - der erste, den du auf den Teller legst, landet oben!

CSS Multiple Backgrounds - Verwendung der background-image Eigenschaft

Lassen wir mit einem einfachen Beispiel mit der background-image Eigenschaft beginnen:

.multi-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-repeat: no-repeat, repeat;
background-position: center center, top left;
}

In diesem Beispiel wenden wir zwei Hintergrundbilder auf ein Element an. Das top-image.png wird oben platziert und wiederholt sich nicht, während das bottom-image.png darunterliegt und sich wiederholt. Das obere Bild wird zentriert, und das untere Bild beginnt von der oberen linken Ecke.

CSS Multiple Backgrounds - Verwendung der background-size Eigenschaft

Nun sehen wir, wie wir die Größe unserer Hintergrundbilder steuern können:

.sized-bg {
background-image:
url('small-icon.png'),
url('large-pattern.png');
background-size: 50px 50px, cover;
background-repeat: no-repeat, repeat;
background-position: top right, center;
}

Hier setzen wir die Größe von small-icon.png auf 50x50 Pixel, während large-pattern.png das gesamte Element bedecken wird. Dies ist großartig, um ein kleines Logo oder Symbol mit einem größeren Hintergrundmuster zu kombinieren.

CSS Multiple Backgrounds - Verwendung der background Eigenschaft

Die background Kurzeigenschaft ermöglicht es uns, alle Hintergrundeigenschaften auf einmal zu setzen:

.shorthand-bg {
background:
url('top-layer.png') no-repeat center / 100px,
linear-gradient(to bottom, #f00, #00f) no-repeat center / cover;
}

Dieses Beispiel kombiniert ein Bild mit einem Gradienten-Hintergrund. Das Bild ist zentriert und auf 100px skaliert, während der Gradient den gesamten Element bedeckt. Es ist, als ob man eine Kirsche auf einem bunten Eisbecher setzt!

CSS Multiple Backgrounds - Vollständiges Bild

Manchmal möchtest du, dass ein Bild den gesamten Hintergrund bedeckt:

.full-size-bg {
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('landscape.jpg') no-repeat center center / cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2em;
}

Dies erstellt einen Hintergrund in voller Größe mit einer halbtransparenten Überlagerung. Es ist perfekt, um dramatische Hero-Abschnitte oder ganztägige Hintergründe zu erstellen.

CSS Multiple Backgrounds - Hero-Bild

Wenn wir schon bei Hero-Abschnitten sind, hier ist, wie du einen erstellen kannst:

.hero-bg {
background:
linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.1)),
url('hero-image.jpg') no-repeat center center / cover;
height: 80vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
color: white;
}

Dies erstellt einen Hero-Abschnitt mit einem Hintergrundbild und einer Gradienten-Überlagerung, die von links nach rechts ausblendet. Es ist, als ob man die Bühne für die große Eröffnung deiner Website bereitet!

CSS Multiple Backgrounds - Verwendung der background-origin Eigenschaft

Die background-origin Eigenschaft bestimmt, wo das Hintergrundbild positioniert wird:

.origin-bg {
background-image: url('pattern.png');
background-origin: content-box, padding-box, border-box;
background-repeat: no-repeat;
border: 10px gestrichelt schwarz;
padding: 20px;
}

Diese Eigenschaft kann besonders nützlich sein, wenn du genau steuern möchtest, wo dein Hintergrund im Verhältnis zum Box-Modell des Elements beginnt.

CSS Multiple Backgrounds - Verwendung der background-clip Eigenschaft

Die background-clip Eigenschaft definiert, wie weit der Hintergrund reichen soll:

.clip-bg {
background-image:
url('top-image.png'),
url('bottom-image.png');
background-clip: content-box, padding-box;
border: 10px fest rgba(0,0,0,0.5);
padding: 20px;
}

Dies ermöglicht es dir, den Hintergrund an verschiedenen Teilen des Box-Modells zu schneiden, was interessante Schichteffekte erzeugt.

CSS Multiple Backgrounds - Verwandte Eigenschaften

Hier ist eine Tabelle der verwandten Eigenschaften, die du mit mehreren Hintergründen verwenden kannst:

Eigenschaft	Beschreibung
background-image	Setzt eines oder mehrere Hintergrundbilder
background-position	Setzt die Startposition jedes Hintergrundbildes
background-size	Gibt die Größe der Hintergrundbilder an
background-repeat	Legt fest, wie sich Hintergrundbilder wiederholen
background-origin	Gibt den Positionierbereich der Hintergrundbilder an
background-clip	Definiert, wie weit der Hintergrund im Element reichen soll
background-attachment	Legt fest, ob ein Hintergrundbild mit der restlichen Seite滚动t oder fest ist

Denke daran, du kannst diese Eigenschaften einzeln oder kombiniert in der background Kurzeigenschaft für kürzeren Code verwenden.

Und das ist es, Leute! Du bist jetzt mit dem Wissen ausgestattet, um verblüffende mehrschichtige Hintergründe in CSS zu erstellen. Erinnere dich daran, Übung macht den Meister, also habe keine Angst, mit diesen Eigenschaften zu experimentieren. Wer weiß? Vielleicht erstellst du ja die nächste große Trend in Webdesign!

Frohes Coden und möge deine Hintergründe stets perfekt geschichtet sein!

Credits: Image by storyset