background Grundlagen

Die vier Basis-Hintergrund-Eigenschaften sind das Fundament für Hintergrundgestaltung in CSS. background-color setzt eine einfache Farbe, background-image erlaubt Bilder und Verläufe, background-repeat steuert die Wiederholung und background-position bestimmt die Platzierung. Zusammen bilden sie die Grundlage, auf der die erweiterten Background-Eigenschaften wie background-size und background-clip aufbauen.

Steckbrief background Grundlagen

Syntax: background-color: <color>
Initialwert: transparent
Vererbt: Nein
Animierbar: Ja

Kategorie: Farben & Hintergründe
Werte: 17
Beispiele: 5
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

background-color füllt den Hintergrund eines Elements mit einer Farbe. Die Farbe reicht bis zum äußeren Rand des Borders (bei background-clip: border-box, dem Standard). Sie liegt immer hinter einem background-image und dient als Fallback, wenn ein Bild nicht lädt.

background-image setzt ein Bild oder einen CSS-Verlauf als Hintergrund. Bilder werden standardmäßig in ihrer natürlichen Größe dargestellt und wiederholt, wenn sie kleiner sind als das Element. CSS-Verläufe wie linear-gradient() zählen ebenfalls als Bilder und können überall dort verwendet werden, wo background-image erwartet wird.

background-repeat bestimmt, ob und wie ein Hintergrundbild wiederholt wird. Der Standardwert repeat kachelt das Bild in beide Richtungen. Mit no-repeat wird das Bild nur einmal angezeigt. repeat-x und repeat-y wiederholen nur horizontal oder vertikal.

background-position platziert das Hintergrundbild innerhalb des Elements. Der Standardwert 0% 0% setzt das Bild in die obere linke Ecke. Du kannst Schlüsselwörter wie center, Prozentwerte oder feste Längen verwenden.

Syntax & Werte

17 Werte

background-color

Wert	Beschreibung	Beispiel
`<color>`	Jeder CSS-Farbwert (hex, rgb, hsl, Named Colors etc.).	background-color: #dbeafe
`transparent`	Kein sichtbarer Hintergrund. (Standard)	background-color: transparent
`currentColor`	Übernimmt die aktuelle Textfarbe.	background-color: currentColor

background-image

Wert	Beschreibung	Beispiel
`none`	Kein Hintergrundbild. (Standard)	background-image: none
`url()`	Pfad zu einer Bilddatei.	background-image: url("bild.jpg")
`<gradient>`	CSS-Verlauf als Hintergrundbild.	background-image: linear-gradient(#1a56db, #059669)

background-repeat

Wert	Beschreibung	Beispiel
`repeat`	Bild wird in beide Richtungen wiederholt. (Standard)	background-repeat: repeat
`no-repeat`	Bild wird nicht wiederholt.	background-repeat: no-repeat
`repeat-x`	Bild wird nur horizontal wiederholt.	background-repeat: repeat-x
`repeat-y`	Bild wird nur vertikal wiederholt.	background-repeat: repeat-y
`space`	Bild wird wiederholt mit gleichmäßigem Abstand, ohne abgeschnitten zu werden.	background-repeat: space
`round`	Bild wird wiederholt und in der Größe angepasst, um den Bereich exakt zu füllen.	background-repeat: round

background-position

Wert	Beschreibung	Beispiel
`left top`	Obere linke Ecke. (Standard: 0% 0%)	background-position: left top
`center`	Horizontal und vertikal zentriert.	background-position: center
`right bottom`	Untere rechte Ecke.	background-position: right bottom
`<percentage>`	Position relativ zum Element und Bild.	background-position: 50% 25%
`<length>`	Fester Offset von der linken oberen Ecke.	background-position: 20px 10px

Beispiele

5 Beispiele

Einfache Hintergrundfarben sind der häufigste Anwendungsfall. Sie eignen sich für Karten, Sections, Badges und überall dort, wo ein Bereich visuell abgegrenzt werden soll.

Hintergrundfarben

.info    { background-color: #dbeafe; color: #1e40af; }
.success { background-color: #d1fae5; color: #065f46; }
.warning { background-color: #fef3c7; color: #92400e; }
.error   { background-color: #fee2e2; color: #991b1b; }

<div class="bg-demo">
<div class="bg-box bg-blue">Info</div>
<div class="bg-box bg-green">Erfolg</div>
<div class="bg-box bg-amber">Warnung</div>
<div class="bg-box bg-red">Fehler</div>
</div>

Da Verläufe als background-image zählen, kannst du sie überall einsetzen, wo Bilder erwartet werden. Im iframe können wir keine externen Bilder laden, aber Verläufe funktionieren perfekt als Platzhalter.

Verläufe als background-image

.linear {
  background-image: linear-gradient(135deg, #1a56db, #7c3aed);
}

.radial {
  background-image: radial-gradient(circle, #059669, #1e293b);
}

.conic {
  background-image: conic-gradient(
    #dc2626, #f59e0b, #059669, #1a56db, #dc2626
  );
}

<div class="gradient-demo">
<div class="gradient-box g-linear">linear</div>
<div class="gradient-box g-radial">radial</div>
<div class="gradient-box g-conic">conic</div>
</div>

background-repeat steuert, wie ein Muster-Bild den Hintergrund füllt. Hier wird ein kleiner Gradient als wiederholbares Muster verwendet.

background-repeat Varianten

.pattern {
  background-image: /* Schachbrett-Muster */;
  background-size: 20px 20px;
}

.a { background-repeat: repeat; }     /* Standard */
.b { background-repeat: repeat-x; }   /* Nur horizontal */
.c { background-repeat: no-repeat; }  /* Einmal */

<div class="repeat-demo">
<div class="repeat-label">repeat (Standard): Muster füllt alles</div>
<div class="repeat-box r-repeat"></div>
<div class="repeat-label">repeat-x: Nur horizontal</div>
<div class="repeat-box r-repeat-x"></div>
<div class="repeat-label">no-repeat: Einmalig</div>
<div class="repeat-box r-no-repeat"></div>
</div>

Mit background-position platzierst du ein nicht-wiederholtes Bild gezielt im Element.

background-position

.lt     { background-position: left top; }
.center { background-position: center; }
.rb     { background-position: right bottom; }
.custom { background-position: 75% 25%; }

<div class="pos-demo">
<div class="pos-box p-lt">left top</div>
<div class="pos-box p-center">center</div>
<div class="pos-box p-rb">right bottom</div>
<div class="pos-box p-custom">75% 25%</div>
</div>

background-color ist immer die letzte Schicht. Wenn ein Bild nicht lädt oder noch nicht geladen hat, sieht der Nutzer die Fallback-Farbe.

background-color als Fallback

.hero {
  background-color: #1e293b;   /* Fallback */
  background-image: url("hero.jpg");
  /* Wenn hero.jpg nicht lädt, ist #1e293b sichtbar */
}

<div class="fallback-demo">
<div class="fallback-box with-fallback">Gradient sichtbar</div>
<div class="fallback-box only-fallback">Bild fehlt → Fallback-Farbe</div>
</div>

Barrierefreiheit

Hintergrundbilder sind für Screenreader unsichtbar. Wenn ein Hintergrundbild wichtige Informationen enthält, etwa Text, Produktbilder oder Logos, musst du sicherstellen, dass diese Inhalte auch im HTML vorhanden sind. Rein dekorative Hintergrundbilder sind unproblematisch, aber sobald das Bild inhaltlich relevant ist, braucht es eine Alternative im Markup oder über ARIA-Labels.

Wenn du Text auf einem Hintergrundbild platzierst, achte auf ausreichenden Kontrast. Ein schönes Foto kann zu wenig Kontrast zwischen hellen und dunklen Bereichen bieten, wodurch der Text schwer lesbar wird. In solchen Fällen hilft ein halbtransparentes Overlay (background: rgba(0,0,0,0.5)) über dem Bild oder eine text-shadow, um den Text vom Hintergrund abzuheben.

Animierte Hintergründe können für Menschen mit Bewegungsempfindlichkeit problematisch sein. Mit prefers-reduced-motion: reduce kannst du Animationen deaktivieren oder durch statische Hintergründe ersetzen. Das gilt besonders für background-position-Animationen, Parallax-Effekte oder animierte Verläufe.

Im Windows High Contrast Mode werden Hintergrundbilder oft ausgeblendet. Stelle sicher, dass der Inhalt auch ohne Hintergrundbild funktional und lesbar bleibt. Eine background-color als Fallback ist immer eine gute Idee.

Häufige Fehler

7 Fehler

01 background-image: url() ohne Anführungszeichen

Zwar funktioniert url(bild.jpg) oft, aber bei Leerzeichen oder Sonderzeichen im Pfad muss der Wert in Anführungszeichen stehen: url("bild.jpg").

02 Keinen Fallback-background-color setzen

Wenn ein Bild nicht lädt, bleibt der Hintergrund transparent. Immer eine passende Farbe als Fallback angeben.

03 background-position ohne background-repeat: no-repeat

Positionierung wirkt sich nur sichtbar aus, wenn das Bild nicht wiederholt wird. Bei repeat wird das gesamte Element sowieso gefüllt.

04 Vererbung erwarten

Anders als color wird background-color nicht vererbt. Kindelemente haben standardmäßig background-color: transparent, wodurch der Hintergrund des Elternelements durchscheint. Das sieht nach Vererbung aus, ist aber keine.

05 background-color nach background Shorthand setzen

Das Shorthand background setzt alle Einzeleigenschaften zurück, auch background-color. Wenn du background und dann background-color schreibst, wird die Farbe überschrieben. Reihenfolge beachten.

06 background-image mit background-color verwechseln

Ein Verlauf ist ein background-image, keine background-color. background-color: linear-gradient(...) funktioniert nicht.

07 Vergessen, dass Verläufe background-image sind

background-image: linear-gradient(...) ist korrekt. Verläufe sind technisch Bilder und verhalten sich auch so (z.B. bei background-size und background-repeat).

Browser-Kompatibilität

5 von 5

Alle vier Basis-Background-Eigenschaften werden von allen modernen Browsern vollständig unterstützt.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

background-color ist in Emails gut unterstützt. background-image und Verläufe funktionieren in Outlook nicht.

Apple Mail

Komplett
Gmail

Teilweise

background-color und background-image funktionieren. CSS-Verläufe werden in einigen Fällen entfernt
Outlook

Teilweise

Nur background-color zuverlässig. background-image erfordert VML-Workarounds. Verläufe nicht unterstützt
Thunderbird

Komplett
Yahoo Mail

Teilweise

background-color zuverlässig. background-image eingeschränkt

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

background Grundlagen

Grundlagen

Syntax & Werte

background-color

background-image

background-repeat

background-position

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter