CSS background-image – Hintergrundbild

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.

Wenn das Hintergrundbild kleiner als das Element ist, wird es automatisch wiederholt, um die gesamte Fläche des Elements zu füllen. Das klassische background-image wurde fast immer als »Kachelmuster« angelegt, bei dem sich die Wiederholungen nahtlos aneinander fügten.

.demo {
	background-image: url("paisley.webp");
	background-size: 20%;
	background-repeat: repeat;
}

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.webp");
   background-color: #efefef;
   background-repeat: repeat-x;
}

oder kurz mit CSS background:

.demo2 { 
   background: #efefef url("background-image.webp") 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.

LCP (Largest Contentful Paint) und CLS (Cumulative Layout Shift)

.card {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}

Wichtig ist es dabei, das Seitenverhältnis aufzudecken, damit es beim Einsetzen des Bildes nicht zu einem LCP-Fehler kommt. LCP indirekt (Largest Contentful Paint – der Zeitpunkt, an dem das größte sichtbare Element der Seite im Viewport vollständig gerendert ist).Die Browser erkennen img-Elemente früher als CSS-Backgrounds, weil Hintergrundbilder erst geladen werden, nachdem das HTML geparst und das CSS geladen wurde.

.hero {
	height: 70vh;
	background-image: url(hero.webp);
	background-size: cover;
}

background-image selbst verschiebt nichts, aber der Container kann einen Layout Shift verursachen, wenn seine Größe nicht stabil ist.

.hero {
	aspect-ratio: 16 / 9;
	background-image: url(hero.jpg);
}

aspect-ratio sorgt heute für einen stabilen Container.

Große Hintergrundbilder im oberen Bereich der Webseite – sogen. Hero-Bilder – sollten bevorzugt mittels img-Tag geladen werden. Dem img-Element stehen die nützlichen Attribute wie fetchpriority und loading zur Verfügung.

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
}

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, HSL, OKLCH oder Farbnamen einsetzen.