Zentrieren Hintergrundbilder in CSS

Um ein als CSS-Hintergrund verwendetes Bild zu zentrieren, setzen Sie background-position: center. Soll das Bild seinen Container ausfüllen, ergänzen Sie background-size: cover; dabei bleibt das Seitenverhältnis erhalten, aber die Bildränder können abgeschnitten werden. Mit background-repeat: no-repeat verhindern Sie ein gekacheltes Muster. Die Eigenschaften steuern unterschiedliche Aspekte: Die Positionierung platziert das Bild, die Größe skaliert es und die Wiederholung bestimmt, ob es gekachelt wird.

Hintergrund-Eigenschaften verwenden, um das Hintergrundbild in CSS zu zentrieren

Legen Sie den Hintergrund auf das Element, dessen Fläche das Bild anzeigen soll. In diesem Beispiel ist .hero mindestens so hoch wie der Viewport. Ersetzen Sie photo.jpg durch den Pfad zu Ihrem Bild.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .hero {
      min-height: 100vh;
      background-image: url("photo.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  </style>
</head>
<body>
  <main class="hero"></main>
</body>
</html>

background-position: center zentriert das Bild horizontal und vertikal innerhalb von .hero. Der Wert center center mit zwei Wörtern bedeutet dasselbe. background-size: cover skaliert das Bild, bis der gesamte Container bedeckt ist. Hat das Bild ein anderes Seitenverhältnis, kann es daher entlang einer Achse beschnitten werden. Soll das ganze Bild sichtbar bleiben, verwenden Sie background-size: contain; dadurch kann im Container ungenutzter Platz entstehen. Lassen Sie background-size weg, wenn das Bild seine natürliche Größe behalten soll.

background-repeat: no-repeat verhindert, dass das Bild gekachelt wird; die Eigenschaft skaliert oder zentriert es nicht. Das standardmäßige Wiederholungsverhalten kann Kacheln erzeugen, wenn das Bild kleiner als sein Container ist. Verwenden Sie daher no-repeat, wenn Sie das nicht möchten. background-attachment bestimmt, ob der Hintergrund mit der Seite scrollt oder relativ zum Viewport fixiert bleibt. Diese Eigenschaft ist optional und zentriert das Bild nicht. Sie können die Deklarationen auch in der Kurzschreibweise background angeben; mit einzelnen Eigenschaften lässt sich jede Einstellung leichter anpassen.

Führen Sie dieses Beispiel aus, um dieselben Deklarationen als CSS-Text zum Kopieren in ein Stylesheet zu formatieren:

const declarations = {
  backgroundImage: 'url("photo.jpg")',
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
  backgroundSize: "cover"
};

for (const [property, value] of Object.entries(declarations)) {
  const cssName = property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
  console.log(`${cssName}: ${value};`);
}

background-image: url("photo.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;

Ein Bildelement als Alternative für den gesamten Viewport positionieren

Ein img-Element ist eine separate Alternative, wenn das Bild zum Inhalt gehört oder für unterstützende Technologien verfügbar sein muss; es ist kein CSS-Hintergrund. Damit es den Viewport hinter dem Seiteninhalt ausfüllt, positionieren Sie es fixiert, setzen Sie die Abstände auf allen vier Seiten und legen Sie es hinter den Inhalt. Die Eigenschaft position ist erforderlich, damit top, right, bottom und left das Element auf diese Weise platzieren.

<img class="viewport-image" src="photo.jpg" alt="">
<main class="page-content">
  <h1>Page content</h1>
</main>
<style>
  .viewport-image {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
</style>

Hier setzt inset: 0 top, right, bottom und left auf null, sodass sich die positionierte Box über den Viewport erstreckt. object-fit: cover skaliert das Bild unter Beibehaltung seiner Proportionen so, dass es die Box ausfüllt; dabei kann es beschnitten werden. Mit object-fit: contain bleibt das ganze Bild sichtbar, möglicherweise mit ungenutztem Platz. Ein leeres alt ist nur dann passend, wenn das Bild dekorativ ist; vermittelt es Informationen, geben Sie einen aussagekräftigen Alternativtext an. Achten Sie auf einer echten Seite darauf, dass der Vordergrundtext über dem Bild lesbar bleibt. Geht es nur um einen dekorativen Hintergrund, ist die erste Methode einfacher und fügt dem Dokument kein Bildelement hinzu. Das unveränderte HTML-Beispiel zeigt außerdem die Überschrift „Page content“; dieser sichtbare Text bleibt Englisch.