Hintergrundbilder einbinden mit CSS

Heute geht es um CSS background image: Die CSS-Eigenschaft background-image bindet eine Grafik ein, zum Beispiel in den Formaten PNG, SVG, JPG, GIF oder WEBP. Wie das funktioniert zeige ich Dir in diesem kurzen Artikel.

Eine Grafik einbinden

In diesem Beispiel möchten wir dem Element mit der ID "beispiel" ein Hintergrundbild zuweisen. Das funktioniert mit folgendem Code:

Der Link kann entweder ein relativer (z.B. img/bild.jpg) oder ein absoluter Pfad (z.B. http://domain.com/bild.jpg) sein.

Wichtig zu beachten: Sollte das Hintergrundbild nicht angezeigt werden, überprüfe, ob das Element eine Breite und Höhe aufweist. Ist das nicht der Fall, wird das Beispiel oben nicht funktionieren. Wenn du keinen Inhalt im Vordergrund, sondern lediglich das Bild im Hintergrund darstellen möchtest, denk bitte daran, dem Element eine feste Breite / Höhe zuzuweisen. Danach sollte das Bild problemlos angezeigt werden.

CSS background image und base64

Du hast auch die Möglichkeit, Grafiken im base64-Format einzubinden. Das funktioniert wie folgt:

Die Position bestimmen

Du hast auch die Möglichkeit zu entscheiden, wie das Bild positioniert werden soll. Dafür zuständig ist die CSS Eigenschaft background-position. In diesem Beispiel sage ich dem Browser, dass er sich bei der Darstellung meines Hintergrundbildes an der Mitte des Bildes orientieren soll:

Bei background-position: 0 0 würde der Browser sich beispielsweise oben links orientieren (0 in der X-Achse, 0 in der Y-Achse).

Wer auf gut lesbaren und optimierten Code Rücksicht nimmt, sollte diese Angaben wie folgt zusammenfassen:

In dem Fall nimmt der Browser automatisch den selben Wert der ersten angegebenen Position.

Hintergrundfarbe als Fallback

Wichtig ist es, eine Hintergrundfarbe als Fallback zu definieren. Sprich: Sollte das Bild nicht angezeigt oder gefunden werden können, wird dennoch die zuvor gewählte Hintergrundfarbe angezeigt. In diesem Praxisbeispiel möchte ich, dass der Hintergrund meines Elements Grün dargestellt wird, sollte mein Bild nicht gefunden werden.

Wichtig in diesem Fall ist es, die Eigenschaft background statt background-image zu verwenden.

Viel Spaß beim Ausprobieren! Weitere CSS-relevante Tutorials findest Du hier.