Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Im Gegensatz zu einem normalen Bild- oder Videoelement wird CSS Background-Image eingesetzt, wenn man über ein Bild oder Video noch einen responsiven Text legen möchte, z. B. bei Hero-Images. Hier ein typisches Beispiel für so ein CSS Hintergrundbild:

Als Hintergrundbild können dabei alle gängigen Bildformate eingesetzt werden. Sogar inline-codierte Bilder (base64), SVG und Farbverläufe werden unterstützt. In diesem Beitrag werden wir jede einzelne CSS-Hintergrundeigenschaft kennenlernen, sowie zum Schluss die sog. „Shorthand“-Syntax von CSS Background-Image. Los geht’s!

Alle CSS Background-Image Eigenschaften im Überblick

Hier eine Liste mit allen Eigenschaften, die wir heute besprechen werden.

Was sind CSS Background-Image Eigenschaften?

Mit den CSS-Hintergrundeigenschaften können wir die Größe und Eigenschaften von Bildern steuern, so dass wir Bilder und darüber liegende Texte und z.B. Buttons mobil-freundlich sowohl für kleinere als auch für größere Bildschirme erstellen können.

Zum Beispiel,

• Die Eigenschaft background-size erlaubt uns, die Breite und Höhe unseres Bildes entsprechend der Bildschirmgröße anzupassen.
• background-position erlaubt es uns, dem Browser mitzuteilen, wo er das Bild auf dem Bildschirm platzieren soll.
• Und vieles mehr!

Ein Demo-Projekt aufsetzen

Im Idealfall kennst Du schon ein paar CSS Grundlagen und etwas HTML. Du brauchst außerdem einen HTML-Editor Deiner Wahl, um die Dateien bearbeiten zu können. Für dieses Beispiel benutzen wir Visual Studio Code (auch VS-Code genannt).

Die HTML-Datei erstellen

Erstelle ein div mit dem Klassennamen ‚container‘ innerhalb des body-Tags in der HTML-Datei.

 <div class="container"></div>

Die CSS-Datei erstellen

Im CSS musst du eine Höhe für den Container angeben, sonst können wir das Bild nicht sehen. In unserem Fall werden wir sie auf 100vh setzen, das bedeutet, das Bild soll die volle Höhe des Bildschirms (vh steht für Viewport Height, siehe „Neue Einheiten für responsive Designs“) einnehmen:

.container {  height: 100vh; }

Lade die Bilder für das Projekt herunter

Die Bilder und Beispieldateien kannst Du hier herunterladen.

Die Eigenschaften von CSS background-image

Mit der Eigenschaft background-image können wir Bilder in unserem Stylesheet hinzufügen, wie folgt:

.container {// Wir setzen den Bildpfad bzw. die URL in Anführungszeichen  background-image: url(' '); }

Wir können background-image auf 2 Arten verwenden:

• Indem wir den relativen Pfad angeben, z.B.

.container {  background-image: url('/wp-content/uploads/2021/08/background-image.png'); }

• Oder durch die Angabe der URL des Bildes, also:

.container {  background-image: url('/wp-content/uploads/2021/08/background-image.png'); }

Wie man CSS background-image einbindet

CSS Hintergrundbilder kann man wahlweise über die URL (als direkten Link) oder per relativen Pfad einbinden. Es gibt drei Fälle, in welchen es Sinn macht, einen relativen Pfad anzugeben:

1. Wenn image und style.css im selben Ordner sind, sieht der relative Pfad so aus: background-image: url("kitty.png")
2. Wenn sich das Bild im einem Unterordner — hier „Assets“ — befindet, sieht der relative Pfad so aus: background-image: url("/assets/kitty.png")
3. Wenn sich das Bild im einem übergeordneten Ordner befindet, benutzen wir diese Pfadangabe: background-image: url("../kitty.png")

Wenn die Bilder, die HTML und die style.css – Datei im gleichen Ordner sind, sieht das so aus:

Die CSS-Eigenschaft background-size

Wir können die Größe eines Bildes mit der Eigenschaft background-size anpassen.

Das CSS dazu sieht aus wie folgt:

.container {  background-size: cover; }

Wir können background-size auf 3 Arten verwenden:

• wir können die Werte cover oder contain verwenden
• die Breite und Höhe des Bildes festlegen (z.B. background-size: 200px 200px;)
• auto verwenden

Beginnen wir mit der Diskussion der Cover- und Contain-Werte.

Der Wert background-size: cover

Beim Wert background-size: cover;
füllt das Bild die ganze Breite aus, und zwar so, die kurze Seite des Hintergrundbildes in die Box reinpasst. Dafür müssen wir ein Bild einfügen, dessen Höhe festlegen und die Bildwiederholung stoppen. Im CSS geht das folgendermaßen:

.container {  background-image: url('cute-bear.png');   background-repeat: no-repeat;   background-size: cover;   // Höhe nicht vergessen  height: 100vh; }

Der Wert background-size: contain

Bei background-size: contain;
wird die längere Seite des Hintergrundbildes in die umgebende Box eingepasst. Um das zu erreichen, geben wir folgende Werte an:

.container {  background-image: url('cute-bear.png');   background-repeat: no-repeat;   background-size: contain;   // Höhe nicht vergessen  height: 100vh; }

Breite und Höhe bei CSS Hintergrund-Bildern

Wir können die Breite und Höhe des Bildes mit der Eigenschaft background-size festlegen. Bitte beachten, dass dadurch die Bilder verzerrt aussehen können, wie im folgenden Beispiel:

Hier die Größenangaben im CSS:

.container {// hier definieren wir width & height   background-size: 200px 200px; }

Vergessen wir auch nicht, das Bild einzufügen, seine Höhe festzulegen und die Bildwiederholung zu beenden. Das Codeschnipsel sieht wie folgt aus:

.container {  background-image: url('cute-bear.png');   background-repeat: no-repeat; // hier definieren wir width & height   background-size: 200px 200px;   // Höhe nicht vergessen  height: 100vh; }

Automatische Größenanpassung mit CSS background-size: auto

Wenn wir diesen Wert verwenden, bleibt das Bild in seiner ursprünglichen Größe. Es ändert sich nicht, wenn wir die Größe des Fensters ändern. Das sieht dann so aus:

Die CSS-Eigenschaft background-repeat

Mit dieser Eigenschaft können wir ein und dasselbe Bild mehrfach wiederholen.

Das CSS dazu sieht wie folgt aus:

.container {  background-repeat: repeat; }

CSS background-repeat hat sechs Werte:

• repeat
• repeat-x
• repeat-y
• no-repeat
• space
• round

Wir untersuchen nun, was mit den einzelnen Werten geschieht. Zuvor müssen wir jedoch ein Bild mit der Eigenschaft background-image einfügen, in folgendem Beispiel ist es die kitty.png:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   // hier werden wir die Werte verändern   background-repeat: no-repeat;   height: 100vh; }

CSS background-repeat

Mit diesem Wert können wir dasselbe Bild sowohl auf der X- als auch auf der Y-Achse mehrfach wiederholen, solange der Bildschirmbereich nicht endet. Hier ist die Größe des Kätzchens 200px x 200px.

Um dieses Ergebnis zu erzielen, schreiben wir:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   background-repeat: repeat;   height: 100vh; }

Der Wert background-repeat: repeat-x

Dieser Wert ermöglicht es uns, dasselbe Bild mehrmals entlang der X-Achse zu wiederholen, solange der Bildschirmbereich nicht endet.

um dies zu erreichen, schreiben wir:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   background-repeat: repeat-x;   height: 100vh; }

Der Wert background-repeat: repeat-y

Dieser Wert funktioniert genauso wie „repeat-x“, aber entlang der Y-Achse, solange der Bildschirmbereich nicht endet.

um dies zu erreichen, schreiben wir:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   background-repeat: repeat-y ;   height: 100vh; }

Der Wert background-repeat: no-repeat

Mit diesem Wert können wir unser Originalbild ohne Wiederholungen erhalten. Dieser Wert ist wird bei CSS Hintergrundbildern am Häufigsten eingesetzt, da diese sich in der Regel nicht wiederholen sollen.

um dies zu erreichen, schreiben wir:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   background-repeat: no-repeat;   height: 100vh; }

Der Wert background-repeat: space

Dieser Wert funktioniert sowohl entlang der X- als auch der Y-Achse. Wir können den Hauptunterschied zwischen den Werten space und round sehen, wenn wir die Größe des Browserfensters ändern. Dabei werden die Zwischenräume so gleichmäßig so weit gestreckt, bis noch ein weiteres Bild in das Fenster hineinpasst.

um dieses Resultat zu erreichen, schreiben wir:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   background-repeat: space;   height: 100vh; }

Der Wert background-repeat: round

Der Wert background-repeat: round; funktioniert sowohl entlang der X- als auch der Y-Achse. Das Bild wird gestreckt bzw. verzerrt, wenn wir die Größe des Fensters ändern.

um dies zu erreichen, schreiben wir:

.container {  background-image: url('kitty.png');   background-size: 200px 200px;   background-repeat: round;   height: 100vh; }

Die CSS-Eigenschaft background-position

Diese Eigenschaft wird verwendet, um die Position eines Bildes auf dem Bildschirm zu ändern.

Die Syntax von background-position ist wie folgt:

.container {// Die Reihenfolge ist X-Achse mal Y-Achse   background-position: 300px  200px; }

Vergessen wir auch nicht, das Bild einzufügen, dessen Höhe festzulegen und die Bildwiederholung zu beenden. Wir haben die Größe des Kätzchens mit Hilfe der Eigenschaft background-size auf 200px X 200px festgelegt:

.container {  background-image: url("kitty-idea.png");   background-size: 200px 200px;   background-repeat: no-repeat;   // Die Reihenfolge ist X-Achse mal Y-Achse   background-position: 300px 200px; height: 100vh; }

Und das ist das Resultat:

Darüber hinaus können auch eine Kombination aus diesen Werten verwenden:

• top (nur Y-Achse)
• left (nur X-Achse)
• right (nur X-Achse)
• bottom (nur Y-Achse)
• sowie Prozentwerte

Als Beispiel wollen wir unser Kätzchen ganz unten rechts platzieren. Hier ist das Codeschnipsel dafür:

.container {  background-image: url("kitty-idea.png");   background-size: 200px 200px;   background-repeat: no-repeat; // In diesem Beispiel ist das Bild auf der Y-Achse unten und auf der X-Achse rechts ausgerichtet   background-position: bottom right;   height: 100vh; }

Bei der Berechnung des verfügbaren Platzes auf dem Bildschirm bestimmen die %-Werte die Position des Bildes. So sieht es im Code aus:

.container {  background-image: url("kitty-idea.png");   background-size: 200px 200px;   background-repeat: no-repeat;   // Die Reihenfolge ist X-Achse mal Y-Achse   background-position: 25% 15%;   height: 100vh; }

Und so sieht das Ergebnis aus:

Die CSS-Eigenschaft background-origin

Diese Eigenschaft legt fest, wie sich das Hintergrundbild in der es umgebenden Box verhält. Klingt abstrakt, drei Beispiele kommen aber sogleich.

Hier das dazugehörige CSS:

.container {  background-origin: border-box; }

Dessen drei mögliche Werte sind:

• border-box
• padding-box (Standardwert)
• content-box

Beim Standard-CSS-Box-Modell ist der äußerste Teil der Rahmen. Danach kommt das Padding und schließlich der eigentliche Inhalt in der Mitte.

Je nachdem, wie man also background-origin definiert, kommen dabei folgende Resultate heraus:

Um diese Ergebnisse zu erzielen:

• brauchen wir zuerst ein Bild,
• wir müssen die Bildwiederholung stoppen und die Höhe und Breite sowohl des Containers als auch des Bildes festlegen.
• Sobald dies geschehen ist, werden wir 40px Padding einfügen, sonst können wir nicht sehen, den Unterschied zwischen dem Padding-Box und der Content-Box.
• Dann fügen Sie einen roten Rahmen von 25 px ein. Setzen Sie den border-style auf dashed, um einen gestrichelten Rahmen auf dem Bildschirm zu erhalten.
• Setzen Sie die Hintergrundgröße auf 640px X 959px

Im CSS sieht das dann so aus:

.container {   background-image: url('cute-girl.jpg');   background-repeat: no-repeat;   background-size: 640 959px;   background-origin: content-box;   padding: 40px;   border: 25px solid red;   border-style: dashed;   width: 500px;   height: 700px; }

Die CSS Eigenschaft background-clip

Background-Clip beschneidet das Hintergrundbild, je nachdem welchen Rahmen man für das Bild festlegt:

.container {  background-clip: border-box; }

Die drei Werte von background-clip sind:

• border-box
• padding-box
• content-box

Je nachdem, wie man also background-clip definiert, kommen dabei folgende Resultate heraus:

Um diese Ergebnisse nachzubilden:

• brauchen wir ein Bild, müssen die Bildwiederholung stoppen, und die Höhe und Breite sowohl des Containers als auch des Bildes festlegen.
• Sobald dies geschehen ist, werden wir 40px Padding einfügen, sonst werden wir nicht in der Lage sein, den Unterschied zwischen dem Padding-Box und Content-Box zu sehen.
• Dann fügen Sie einen roten Rahmen von 25 px ein. Setzen Sie den border-style auf dashed, um den gestrichelten Rahmen auf dem Bildschirm zu sehen.
• Setzen Sie die Hintergrundgröße auf 640px & 959px

Der Code sieht wie folgt aus:

.container {   background-image: url('cute-girl.jpg');   background-repeat: no-repeat;   background-size: 640 959px;   background-clip: border-box;   padding: 40px;   border: 25px solid red;   border-style: dashed;   width: 500px;   height: 700px; }

Die CSS-Eigenschaft background-attachment

Mit dieser Eigenschaft können wir das Verhalten unseres Inhalts und Bildes beim Scrollen steuern:

.container {  background-attachment: scroll; }

Die drei möglichen Werte von background-attachment sind:

• scroll
• fixed
• local

Wenn wir scroll verwenden, ist das Bild fixiert und wir können unseren Inhalt frei verschieben. Der feste Wert gibt uns einen Parallax-Effekt beim Scrollen mit der Maus und erzeugt lokal mehrere Bilder, solange unser Inhalt nicht endet.

Hier das Ergebnis (Link zu Codepen):

Die CSS-Eigenschaft background-color

Mit Sicherheit eine der am häufigsten verwendeten Hintergrundeigenschaften. Mit ihr lässt sich die Farbe des Hintergrunds eines Elements ändern. Die Farbe kann als Farbname (z.B. „red“) oder in rgb-, hsl- oder hex-Schreibweise angegeben werden:

.container {  background-color: red; }

als Hex-Wert:

.container {  background-color: #ff0000; }

als rgb() – Wert:

.container {  background-color: rgb(255, 0, 0); }

Oder wir können rgba() verwenden, um sowohl die Farbe als auch die Deckkraft wie folgt festzulegen:

.container {// Die 0.5 am Ende steht für 50% Deckkraft   background-color: rgba(99, 110, 114, 0.5); }

Hier ein Experiment mit der Farbe „Eton blue“ mit verschiedenen Deckkraftstufen:

und zu guter letzt als linear-gradient() (deutsch: linearer Farbverlauf), hierfür wird allerdings nicht background-color sondern background-image oder einfach nur background verwendet:

.container {  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%); }

So legen wir den Farbverlauf mit linear-gradient() fest

Wir können diese Eigenschaft verwenden, um einen Farbverlauf mit mehr als einer Farbe zu erstellen. Hier sind einige Beispiele für Farbverläufe:

Nun zum konkreten Beispiel. Wir wollen diesen Hintergrund-Farbverlauf mit background-image: linear-gradient() nachbilden:

Das ist unser Codeschnipsel:

.container {  background: linear-gradient(90deg, #22c1c3, #fdbb2d); }

Die Syntax für Hintergrundbilder in der Kurzform

Im folgenden Beispiel verwenden wir kitty.png auf blauem Hintergrund bei 200px auf der X-Achse und 200px auf der Y-Achse. Der Codeschnipsel sieht wie folgt aus:

.container {  background-color: skyblue;   background-image: url('kitty.png');   background-repeat: no-repeat;   background-attachment: fixed;   background-position: 200px 200px;   height: 100vh; }

Und die Kurzform (a.k.a. „Shorthand“) davon sieht so aus:

.container {  background: skyblue url('kitty.png') no-repeat fixed 200px 200px;   height: 100vh; }

Diese Kurzform spart uns gleich mehrere Zeilen Code. Wichtig ist es, die Reihenfolge dieser Werte beizubehalten, sonst funktionieren die Angaben nicht mehr. Das Ergebnis sieht dann so aus:

Ein Wort zu Ladezeiten

CSS Hintergrundbilder sind grundsätzlich unvorteilhaft, wenn es um Website-Ladezeiten geht. Sie sind nicht direkt im Markup einer Website enthalten, sondern werden über das CSS ausgeliefert. Das bedeutet, dass erst das CSS geladen sein muss, bevor das Hero Image abgerufen werden kann.

Wenn Du jedoch nicht auf CSS Background Images verzichten kannst, solltest Du folgendes HTML zum Header Deiner Website hinzufügen, sodass der Browser das Hintergrundbild schneller laden kann:

<link    rel="preload"   href="https://drweb.de/wp-content/themes/child-theme/images/name-des-hero-images.webp"   as="image"   fetchpriority="high" />  </head>

Fazit

Wir hoffen, dass diese Einführung zum besseren Verständnis dieses Themas beiträgt und dem einen oder der anderen als Nachschlagewerk dienen kann.

Dieser Artikel wurde aus dem Englischen übertragen,  technisch editiert und am 14. Sept. 2021 veröffentlicht. Der Artikel erschien zuerst auf Freecodecamp.

Verwendetes Bildmaterial:

• Cute rabbit with duck
• Cute cat with duck
• Cute panda
• Kitty avatar