CSS Backgrounds – Die background Eigenschaft
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- background-attachment
Wenn du mit mehreren Hintergründen arbeitest, kann es schnell unübersichtlich werden. Es gibt also Möglichkeiten, selbst bei komplexen Hintergrundgestaltungen den Überblick zu behalten:
body {
background: black url(//unsplash.it/100/100) no-repeat;
}Ein weiteres Problem bei dieser Methode ist, dass jeder Teil der Hintergrundabkürzung entweder null oder ein Argument akzeptieren kann. Das bedeutet, wenn ich mehrere Hintergrundbilder verwenden möchte, ist das nicht möglich. In diesem Fall müsste ich den längeren Weg gehen.
Mehrere Hintergrundbilder
Hier bekommen wir mehreren Hintergrundbilder zum Laufen.
body {
background-color: black;
background-image: url(//unsplash.it/100/100), url(//unsplash.it/200/200);
background-repeat: no-repeat;
}Dabei werden die Bilder übereinander gestapelt, wobei das erste Bild oben liegt und jedes weitere eine Ebene tiefer im liegt.
In diesem Fall werden beide auf no-repeat eingestellt, aber ich kann sie auch einzeln wiederholen:
body {
background-color: black;
background-image: url(//unsplash.it/100/100), url(//unsplash.it/200/200);
background-repeat: repeat-y, repeat-x;
}Auf diese Weise wird das erste Bild entlang der Y-Achse und das zweite entlang der X-Achse wiederholt.
Blending modes
Einer der nützlichsten Fälle, in denen mehrere Bilder (oder ein Bild und eine Farbe) vorhanden sind, ist die Verwendung des background-blending-mode, um sie miteinander zu verbinden!
body {
height: 100vh;
background-image: linear-gradient(45deg, red, blue),
url(//unsplash.it/1200/600);
background-size: cover;
background-blend-mode: multiply;
}