CSS, HTML und Javascript mit {stil}

CSS background-image

CSS background-image bestimmt ein Bild als Hintergrundbild für ein Element. Das Dateiformat des Hintergrundbilds kann JPG, PNG, SVG, webP oder GIF sein.

Das Bild kann auch Base64-kodiert direkt ins CSS gesetzt werden oder ein Verlauf (Gradient) sein, für den keine Bilddatei angelegt werden muss.

Ohne weitere Angaben beginnt das Hintergrundbild oben links und wiederholt sich nach rechts und nach unten, so weit sich das Element erstreckt. Am rechten und am unteren Rand wird das Hintergrundbild abgeschnitten.

Die Größe des Hintergrundbilds wird von den Abmessungen des Pixelbildes bestimmt.

.demo1 { background-image: url("background-image.png")}

Innerhalb der runden Klammern nach url (Uniform Resource Locator – Zeiger zur Resource) sitzt der Pfad zur Bilddatei.

Die Eigenschaft background-image kann weiter verfeinert werden:

  • background-position gibt den Ursprung,
  • background-repeat die Art der Wiederholung des Hintergrunds an,
  • background-color setzt die Farbe des Hintergrunds, die durchscheint, wenn der Vordergrund transparent oder teilweise transparent ist.
  • background-attachment bestimmt, ob das Hintergrundbild mitscrollt,
  • background-position legt die Urspungsposition fest,
  • background-size verkleinert oder vergrößert das Hintergrundbild.
.demo2 { 
   background-image: url("background-image.png");
   background-color: #efefef 
   background-repeat: repeat-x;
}
oder kurz mit CSS background:
.demo2 { 
   background: #efefef url("background-image.png") repeat-x;
}

Unter dem halb durchsichtigen Rahmen erkennt man, dass das Hintergrundbild unter border nicht abgeschnitten ist, sondern unter dem Rahmen weiterläuft. Das Hintergrundbild beginnt aber erst innerhalb des Blocks.

background-image – Animation

background-image selber kann nicht animiert werden, aber CSS animiert die zusätzlichen Eigenschaften von background-image

CSS Animation background-image
.flydemo { 
   background: url(background-image-animate.png) repeat-x;
   width: 90%; margin: 1em auto; max-width:600px; height: 110px;
   animation: flybirds 12s linear infinite;
}

@keyframes flybirds {
	from { background-position: 0px 0px }
	to { background-position: 300px 0px }
}
  • 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.

background-image mit Gradient (Verlauf)

Früher mussten wir für einen weichen Verlauf von einer Farbe zur anderen oder für einen Verlauf von Farbe zu Transparenz ein Hintergrundbild einsetzen. Das erledigt heute background-image mit der Eigenschaft linear-gradient oder radial-gradient.

.demo-gradient { 
   background-image: linear-gradient(
      to right, Richtung für linear-gradient
      #FED2CF,	erste Farbe
      #fff,     erste Farbe
      #B5D5D8); erste Farbe
}

Hintergrundbilder als Base64 / SVG

Im Sinne kurzer Ladezeiten und weniger HTTP-Requests lohnt es sich bei kleinen Bildern, das Bild nicht als Link, sondern als Base64-kodierten String einzusetzen. Das gilt auch für Hintergrundbilder:

.bgdemo { background-image: url(data:image/png;base64,iVBORw0KGgoAAA … gg==) repeat-x bottem }

Dieses Verfahren wird auch als data URI bezeichnet.

background image