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.

css background image - Hintergrundbilder einbinden mit CSS

Eine Grafik einbinden

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

CSS

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:

CSS

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:

CSS

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:

CSS

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.

CSS

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.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ein Kommentar zu “Hintergrundbilder einbinden mit CSS

  1. Umzugsfirma Berlin sagt:

    Vielen Dank für die Informationen

Diese Website verwendet Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.