Mehr als ein background-image
background image stapelt Hintergrundbilder in Ebenen übereinander und bildet die Basis für Animationen und Effekte. In einer Komma-getrennten Liste von beliebig vielen Hintergrundbildern liegt das zuerst aufgeführte Bild oben, die folgenden Bilder sitzen jeweils eine Ebene tiefer.
#unterwasser { ┌── oberes Bild
width:98%; │
height:125px; ▼
background-image: url(muscheln.webp),url(water.webp);
▲
│
unteres Bild ────-┘
background-position-x: 0px;
background-position-y: 20px, -20px;
▲ ▲
│ │
oberes Bild ────-┘ │
│
unteres Bild ────-┘
background-repeat: repeat, repeat-x;
background-size: 25%, 100%;
background-color: hsl(240,20%, 50%) }
@media only screen and (min-width:680px) {
#unterwasser { width: 600px; height: 250px }
}
Wenn der Block länger wird, wandert ein background-image mit background-position:bottom automatisch nach unten. Das spart viele Zeilen HTML- und CSS-Code und ist flexibler als ineinander verschachtelte Blöcke.
url(bild.png) ist die URL, die Adresse eines Hintergrundbildes, ist der Pfad zum Ordner, in dem das Bild liegt. Der Pfad muss relativ zur Webseite angegeben werden. Liegt das Hintergrundbild z.B. in einem Ordner bilder unterhalb der aufrufenden Seite, wird url(bilder/bild.png) angegeben. Alternativ funktioniert eine absolute Adresse mit dem vollständigen Pfad vom root-Ordner aus url(/bild.png).
Wenn die einzelnen Werte für die sonstigen Eigenschaften nicht aufgeführt werden, gilt die Voreinstellung:
background-repeat: repeat-x repeat-y | Das Hintergrundbild wird in x- und in y-Richtung unendlich wiederholt.
Wird bei mehreren Hintergrundbildern ein Stil – z.B. background-repeat – mit nur einem Wert aufgeführt, wird der Stil für alle weiteren Hintergrundbilder wiederholt.
background-image – Animation
background-image selber kann nicht animiert werden, aber CSS animiert die individuellen Eigenschaften von background-image – auch die individuellen Eigenschaften von mehreren Hintergrundbildern. Wenn mehrere Hintergrundbilder eingesetzt werden, können alle Eigenschaften individuell in einer CSS-Regel animiert werden.
@keyframes flybirds {
from { background-position: 0px 20px, 0px 10px, 0px -20px }
to { background-position: 300px 20px, -400px 10px, -150px -20px }
}
#threebox {
width: 300px; height: 125px; margin: 10px auto;
background-image: url(bird1.png), url(bird2.png), url(wolken.png);
background-position: 0px 20px, 0px 10px, 0px -20px;
background-repeat: repeat-x;
background-size: 33%, 20%, 80%;
background-color: hsl(240,20%, 50%);
animation: flybirds 12s linear infinite;
}
- Die Eigenschaften von mehreren Hintergrundbildern lassen sich zwar individuell animieren, nicht aber die Dauer der Animation. animation:background-position 12s erlaubt nur eine Zeitgabe.
- Wenn bei der Angabe von background-position Prozent oder Schlüsselwörter wie top oder bottom verwendet werden oder eine Mischung, muss die Animation die einzelnen Maßangaben verwenden.
- Eine Animation via transition anzustoßen – das klingt bei nur zwei Keyframe-Zuständen einfacher. Firefox unterstützt aber transition nicht bei der Animation von background-image.
