Hintergrundbilder und -farben

Mit CSS kannst du Hintergrundfarben und Hintergrundbilder für einzelne Elemente oder die gesamte Webseite festlegen. Dafür nutzt du Eigenschaften wie background-color und background-image.

Hintergrundfarben

Die Eigenschaft background-color färbt den Hintergrund eines Elements. Du kannst Farbnamen, Hex-Werte, RGB oder HSL verwenden.

Hintergrundfarbe für die gesamte Webseite

Möchtest du den Hintergrund der gesamten Seite ändern, verwendest du meist das <body>-Element.

CSS Hintergrund body

1body {
2    background-color: #f5f5f5;
3}

Ausgabe

Der Bereich hat einen grauen Hintergrund (#cdcdcd;).

Hintergrundfarbe für Buttons

Du kannst auch einzelnen Elementen wie Buttons eine eigene Hintergrundfarbe geben:

CSS Hintergrund Button

1button {
2    background-color: royalblue;
3    color: white;
4}

Der Button hat hier die Hintergrundfarbe royalblue und weiß als Schriftfarbe.

Ausgabe

Hintergrundbilder

Mit background-image kannst du ein Bild als Hintergrund eines Elements einbinden. Der Pfad zur Bilddatei steht in der url()-Funktion.

Grundsyntax

CSS Hintergrundbild Syntax

1.element {
2    background-image: url("bild.jpeg");
3}

Der Pfad in url() wird in CSS normalerweise relativ zur CSS-Datei oder als absolute URL angegeben. In diesem Next.js-Beispiel wird das Bild importiert, damit der Pfad beim Build korrekt erzeugt wird.

Hintergrundbild für ein Element

Ein Hintergrundbild wird nur innerhalb des jeweiligen Elements angezeigt. Gib dem Element eine Höhe, damit das Bild sichtbar wird:

CSS Hintergrundbild Element

1.box {
2    background-image: url("bild.jpeg");
3    background-size: cover;
4    background-position: center;
5    height: 150px;
6    padding: 15px;
7}

HTML Element

1<div class="box">Text auf Hintergrundbild</div>

Ausgabe

Text auf Hintergrundbild

Hintergrundbild für die gesamte Webseite

Um ein Hintergrundbild für die ganze Seite zu setzen, wendest du background-image auf das body-Element an. Oft kombinierst du es mit background-size: cover, damit das Bild den gesamten Bereich ausfüllt:

CSS Hintergrundbild body

1body {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: cover;
5    background-position: center;
6}

Wiederholung des Hintergrundbildes

Standardmäßig wiederholt sich ein Hintergrundbild in beide Richtungen (Kachel-Muster). Mit background-repeat steuerst du das Verhalten:

repeat – Bild wird horizontal und vertikal wiederholt (Standard)
no-repeat – Bild wird nur einmal angezeigt
repeat-x – nur horizontal wiederholen
repeat-y – nur vertikal wiederholen

Keine Wiederholung (no-repeat)

CSS background-repeat no-repeat

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: 80px auto;
5}

Ausgabe

Das Bild wird nur einmal angezeigt.

Wiederholung (repeat)

CSS background-repeat repeat

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: repeat;
4    background-size: 80px auto;
5}

Ausgabe

Das verkleinerte Bild wiederholt sich.

Bei kleinen Mustern oder Texturen ist repeat sinnvoll. Bei großen Fotos nutzt du meist no-repeat.

Größe des Hintergrundbildes

Mit background-size legst du fest, wie groß das Hintergrundbild dargestellt wird. Die häufigsten Werte sind cover und contain:

cover – Bild füllt den gesamten Bereich aus (kann beschnitten werden)
contain – gesamtes Bild ist sichtbar (kann Leerräume hinterlassen)

cover

CSS background-size cover

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: cover;
5    background-position: center;
6}

Ausgabe

Das Bild füllt den Bereich aus.

contain

CSS background-size contain

1.box {
2    background-image: url("bild.jpeg");
3    background-repeat: no-repeat;
4    background-size: contain;
5    background-position: center;
6}

Ausgabe

Das gesamte Bild ist sichtbar.

Weitere Details zu Hintergrundgrößen und -positionen lernst du im nächsten Kapitel.

Im nächsten Kapitel lernst du: Farbverläufe (Gradients)