background Grundlagen

Zuletzt aktualisiert am 15. Februar 2026

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.

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

background-color

background-image

background-repeat

background-position

Beispiele

Hintergrundfarben

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.

.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>

Gradient als Hintergrundbild

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.

.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 Varianten

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

.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>

background-position

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

.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>

Farbe als Fallback für Bilder

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

.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

• 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").
• Keinen Fallback-background-color setzen: Wenn ein Bild nicht lädt, bleibt der Hintergrund transparent. Immer eine passende Farbe als Fallback angeben.
• 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.
• 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.
• 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.
• background-image mit background-color verwechseln: Ein Verlauf ist ein background-image, keine background-color. background-color: linear-gradient(...) funktioniert nicht.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften