CSS, HTML und Javascript mit {stil}

CSS background-image

CSS background-image, background-color

CSS background-image legt ein oder mehrere Hintergrundbilder in einen Block. background-image kann ein JPG, PNG oder GIF-Bild oder Base64-kodiert sein, eine SVG-Grafik oder ein Verlauf (Gradient).

In CSS2.1 konnte jedem Element nur ein Hintergrundbild zugewiesen werden.

Mehrere Hintergrundbilder

background-image kann mehrere Hintergrundbilder für ein Element einsetzen. Die Bilder sitzen in einer Komma-getrennten Liste. Jedes Hintergrundbild bildet eine Ebene. Zuoberst liegt das zuerst aufgeführte Bild, die folgenden Bilder liegen jeweils eine Ebene tiefer.

#birdbox { width: 300px; height: 125px; 
   background-image: url(bird.png), url(wolken.png);
                            ^               ^
                            |               |
           oberes Bild  ----+               |
                                            |
                           unteres Bild ----+ 
   background-position-x: 0px;
   background-position-y: 20px, -20px;
                            ^     ^
                            |     |
           oberes Bild  ----+     |
                                  |
                unteres Bild  ----+ 
                   
   background-repeat: repeat-x;
   background-size: 33%,  80%;
   background-color: hsl(240,20%, 50%) }
   
@media only screen and (min-width:680px) {
    #birdbox { 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.

Die URL des 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.

CSS Animation background-image
 
@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.