CSS, HTML & Javascript mit {stil}

CSS background-image – Hintergrundbild

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

CSS background-image

Grundeinstellungen des Hintergrundbilds

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 per Vorgabe und ohne weitere Angaben von den Abmessungen des Hintergrundbilds bestimmt.

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

Innerhalb der runden Klammern nach url (Uniform Resource Locator – Zeiger zur Resource) sitzt der Pfad zur Bilddatei. Das Hintergrundbild kann auch Base64-kodiert direkt ins CSS gesetzt werden oder ein Verlauf (Gradient) sein, für den keine Bilddatei angelegt werden muss.

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-origin, background-clip Reichweite und Position von Hintergrundbildern festlegen,
  • 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 responsive: Media Queries oder image-set

Bei Hintergrundbildern sorgen Media Queries mit unterschiedlichen Bildgrößen für die passende Pixel-Auflösung je nach Größe des Viewports.

.withbg {
	background-size:cover;
	background-position: right center;
}
@media (max-width: 719px) {
	.withbg {
		width: 98%;
		background-image: url(seashell-s.jpg);
		border:4px solid blue;
		height: 300px;
	}
} 

@media (min-width: 720px) {
	.withbg {
		max-width: 980px;
		background-image: url(seashell-l.jpg);
		border:4px solid beige;
		height: 460px;
	}
}

Wenn Retina-Monitore von hochauflösenden Hintergrundbildern profitieren sollen, kommt image-set zum Einsatz, um unterschiedlich hohe Pixeldichten / Pixel-Auflösungen einzusetzen. Da alle modernen Browser CSS image-set unterstützen, das Hintergrundbild auf Media Queries verzichten.

.retina-bg {	
	background-image: image-set(url(floral-s-1x.jpg) 1x,
		                        url(floral-retina-l-2x.jpg) 2x);
	width:96%;
	height:300px;
	background-repeat: no-repeat;
	background-size: cover;
}

background-size : cover füllt den div-Block mit dem Bild. Mit background-position: right center bleibt der wichtigste Bildausschnitt sichtbar, denn cover beschneidet das Bild.

Responsive Hintergrundbilder stellen also kein Problem dar. Was dem Hintergrundbild allerdings fehlt: background-image kennt kein loading="lazy". Abhilfe könnte hier Javascript mit dem Intersection Observer bringen.

background-image – Animation

background-image selber kann nicht animiert werden, aber CSS animiert die zusätzlichen Eigenschaften von 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

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==);
    background-position: bottom;
    background-repeat: repeat-x;
}

Dieses Verfahren wird auch als data URI bezeichnet.

SVG background-image

Ein SVG kann direkt inline im CSS als Hintergrundbild definiert werden. Das lohnt sich schon mal für kleine Icons und vermeidet zusätzliche HTTP-Requests.

.svgbackground {
  background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 185 110"><rect style="fill:#a3bf4a;stroke:#ededed;stroke-width:4;" width="178" height="89" x="4" y="11" rx="44" /> … </svg>');
  width: 185px; height: 110px;
}

Dabei kann gewöhnliches UTF-8 anstelle von base64 eingesetzt werden. Das macht die kleine Technik so schön intuitiv.

Wenn data:image/svg+xml;utf8 nicht funktioniert, liegt es an den Farben. Nee wa? Kein Hex mit Hash, sondern RGB oder HSL oder Farbnamen einsetzen.

Suchen auf mediaevent.de