background Erweitert

Die erweiterten Background-Eigenschaften geben dir volle Kontrolle über die Darstellung von Hintergrundbildern. background-size skaliert Bilder auf cover oder contain, background-clip begrenzt den sichtbaren Bereich (inklusive Gradient-Text-Effekte), background-origin definiert den Bezugspunkt für die Positionierung und background-attachment steuert das Scroll-Verhalten. Das background Shorthand fasst alle acht Einzeleigenschaften in einer Zeile zusammen und ermöglicht Multiple Backgrounds.

Steckbrief background Erweitert

Syntax: background: <bg-color> <bg-image> <bg-position> / <bg-size> <bg-repeat> <bg-origin> <bg-clip> <bg-attachment>
Initialwert: transparent none 0% 0% / auto repeat padding-box border-box scroll
Vererbt: Nein
Animierbar: Ja
Kurzform für: background-color, background-image, background-repeat, background-position, background-size, background-clip, background-origin, background-attachment

Kategorie: Farben & Hintergründe
Werte: 15
Beispiele: 5
Browser: 4 von 5
E-Mail: 1 von 5
Stand: 15.02.2026

Grundlagen

background-size bestimmt, wie groß ein Hintergrundbild dargestellt wird. cover skaliert das Bild so, dass es das Element vollständig ausfüllt, auch wenn Teile abgeschnitten werden. contain skaliert so, dass das gesamte Bild sichtbar bleibt, auch wenn Leerräume entstehen. Du kannst auch feste Werte oder Prozentwerte angeben.

background-clip legt fest, wie weit der Hintergrund reichen darf. Der Standard border-box zeichnet den Hintergrund bis zum äußeren Border-Rand. padding-box schneidet beim Padding ab, content-box beim Inhalt. Der besondere Wert text beschränkt den Hintergrund auf die Textform und erzeugt Gradient-Text-Effekte.

background-origin definiert den Bezugspunkt für background-position und background-size. Normalerweise ist das die Padding-Box. Das wird erst relevant, wenn Borders und Padding ins Spiel kommen.

background-attachment steuert, ob das Hintergrundbild mit dem Element scrollt (scroll), mit dem Inhalt des Elements scrollt (local) oder am Viewport fixiert bleibt (fixed).

Syntax & Werte

15 Werte

background-size

Wert	Beschreibung	Beispiel
`auto`	Bild wird in seiner natürlichen Größe angezeigt. (Standard)	background-size: auto
`cover`	Bild füllt das Element komplett aus. Überstehende Teile werden abgeschnitten.	background-size: cover
`contain`	Bild wird vollständig sichtbar. Leerräume können entstehen.	background-size: contain
`<length>`	Breite und optional Höhe in einer CSS-Einheit.	background-size: 200px 100px
`<percentage>`	Prozentual zum Hintergrund-Positionierungsbereich.	background-size: 50% auto

background-clip

Wert	Beschreibung	Beispiel
`border-box`	Hintergrund reicht bis zum äußeren Border-Rand. (Standard)	background-clip: border-box
`padding-box`	Hintergrund wird am Padding-Rand abgeschnitten.	background-clip: padding-box
`content-box`	Hintergrund wird am Content-Rand abgeschnitten.	background-clip: content-box
`text`	Hintergrund wird auf die Textform beschränkt. Erzeugt Gradient-Text-Effekte.	background-clip: text

background-origin

Wert	Beschreibung	Beispiel
`padding-box`	Positionierung bezieht sich auf die Padding-Box. (Standard)	background-origin: padding-box
`border-box`	Positionierung bezieht sich auf die Border-Box.	background-origin: border-box
`content-box`	Positionierung bezieht sich auf die Content-Box.	background-origin: content-box

background-attachment

Wert	Beschreibung	Beispiel
`scroll`	Hintergrund scrollt mit dem Element, nicht mit dem Inhalt. (Standard)	background-attachment: scroll
`local`	Hintergrund scrollt mit dem Inhalt des Elements.	background-attachment: local
`fixed`	Hintergrund ist am Viewport fixiert und scrollt nicht.	background-attachment: fixed

Beispiele

5 Beispiele

cover füllt immer den gesamten Container, auch wenn Teile abgeschnitten werden. contain zeigt immer das gesamte Bild, auch wenn Leerräume bleiben. Hier mit Verläufen als Bild-Ersatz.

background-size: cover vs. contain

.cover   { background-size: cover; }
.contain { background-size: contain; }
.fixed   { background-size: 60px 60px; }

<div class="size-demo">
<div class="size-box s-cover">cover</div>
<div class="size-box s-contain">contain</div>
<div class="size-box s-fixed">60px 60px</div>
</div>

background-clip: text beschränkt den Hintergrund auf die Textform. Kombiniert mit color: transparent entsteht ein Gradient-Text-Effekt.

background-clip: text

.gradient-text {
  font-size: 32px;
  font-weight: 800;
  background-image: linear-gradient(135deg, #1a56db, #7c3aed, #dc2626);
  -webkit-background-clip: text; /* Safari */
  background-clip: text;
  color: transparent;
}

<div class="clip-text-demo">
<div class="gradient-text">Gradient Text</div>
<div class="gradient-text-small">Auch in kleiner Größe</div>
</div>

scroll (Standard) fixiert den Hintergrund relativ zum Element. local lässt den Hintergrund mit dem Elementinhalt scrollen.

background-attachment: scroll vs. local

/* Hintergrund bleibt stehen, Inhalt scrollt */
.scroll {
  background-attachment: scroll;
}

/* Hintergrund scrollt mit dem Inhalt */
.local {
  background-attachment: local;
}

<div class="attach-demo">
<div class="attach-box a-scroll">
  <div class="attach-label">scroll (Standard)</div>
  <p>Das Linien-Muster bleibt stehen, während der Inhalt scrollt.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
  <p>Duis aute irure dolor in reprehenderit.</p>
</div>
<div class="attach-box a-local">
  <div class="attach-label">local</div>
  <p>Das Linien-Muster scrollt mit dem Inhalt mit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation.</p>
  <p>Duis aute irure dolor in reprehenderit.</p>
</div>
</div>

CSS erlaubt mehrere Hintergrundbilder, getrennt durch Komma. Das erste Bild liegt ganz oben, das letzte ganz unten. background-color gilt nur für die letzte Schicht.

Multiple Backgrounds

.layered {
  background-image:
    radial-gradient(circle at 20% 80%,
      rgba(26, 86, 219, 0.6), transparent 50%),
    radial-gradient(circle at 80% 20%,
      rgba(124, 58, 237, 0.6), transparent 50%),
    radial-gradient(circle at 50% 50%,
      rgba(5, 150, 105, 0.4), transparent 60%);
  background-color: #0f172a;
}

<div class="multi-demo">
<div class="multi-box">Drei überlagerte Verläufe</div>
</div>

Das background Shorthand fasst alle Werte zusammen. Die size-Angabe folgt nach einem / auf die Position.

Shorthand vs. Einzeleigenschaften

/* Shorthand: Position / Size */
.shorthand {
  background: linear-gradient(135deg, #1a56db, #7c3aed)
              center / cover no-repeat;
}

/* Entspricht diesen Einzeleigenschaften */
.longhand {
  background-image: linear-gradient(135deg, #1a56db, #7c3aed);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="shorthand-demo">
<div class="sh-box sh-shorthand">Shorthand</div>
<div class="sh-box sh-longhand">Einzeleigenschaften</div>
</div>

Barrierefreiheit

Wenn du background-clip: text mit einem Gradient verwendest, ist der Text technisch gesehen color: transparent, also unsichtbar. Der Hintergrund macht ihn sichtbar. Falls der Hintergrund aus irgendeinem Grund nicht lädt oder im High Contrast Mode entfernt wird, verschwindet der gesamte Text. Setze immer eine Fallback-Farbe, etwa über @supports not (background-clip: text) oder eine solide color vor der transparent-Deklaration.

Multiple Backgrounds sind in der Regel rein dekorativ, was aus Barrierefreiheitssicht in Ordnung ist. Wenn mehrere überlagerte Hintergrundbilder aber wichtige Inhalte enthalten, müssen diese im HTML oder via ARIA-Labels zugänglich gemacht werden. Vergiss nicht: Screenreader sehen nur das Markup, nicht das Rendering.

Im High Contrast Mode werden Hintergrundbilder häufig ausgeblendet oder durch Systemfarben ersetzt. Das betrifft sowohl einfache background-image als auch komplexe Multiple Backgrounds. Dein Layout sollte auch ohne diese Hintergründe verständlich und nutzbar bleiben.

Häufige Fehler

6 Fehler

01 background-size im Shorthand ohne /

Im background Shorthand muss size direkt nach position stehen und mit einem / getrennt werden. background: url() center cover funktioniert nicht, korrekt ist background: url() center / cover.

02 background-clip: text ohne -webkit- Prefix

Safari braucht noch -webkit-background-clip: text. Immer beide Varianten angeben, um alle Browser abzudecken.

03 color: transparent bei background-clip: text vergessen

Ohne color: transparent ist der Gradient-Hintergrund hinter dem undurchsichtigen Text unsichtbar. Der Text muss durchsichtig sein, damit der Gradient durchscheint.

04 background Shorthand überschreibt alle Einzeleigenschaften

background: red setzt nicht nur die Farbe, sondern setzt auch background-image, background-position, background-size usw. auf ihre Standardwerte zurück. Das kann zuvor gesetzte Werte unerwartet entfernen.

05 background-attachment: fixed im iframe oder Mobile

fixed funktioniert in iframes und auf vielen mobilen Browsern nicht wie erwartet. Auf iOS-Safari wird fixed als scroll behandelt. Verwende local für scroll-basierte Effekte innerhalb von Containern.

06 Multiple Backgrounds: Reihenfolge vertauscht

Das erste Bild in der Liste liegt oben, das letzte unten. Wenn du ein Overlay über einen Hintergrund legen willst, muss das Overlay zuerst stehen.

Browser-Kompatibilität

4 von 5

Alle erweiterten Background-Eigenschaften werden von modernen Browsern unterstützt. background-clip: text braucht in Safari noch den -webkit- Prefix.

Chrome

Komplett
Firefox

Komplett
Safari

Teilweise

background-clip: text braucht -webkit- Prefix
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

1 von 5

Die erweiterten Background-Eigenschaften sind in HTML-Emails kaum nutzbar. Nur background-color und einfache background-image werden breit unterstützt.

Apple Mail

Komplett
Gmail

Teilweise

background-size und background-position werden unterstützt. background-clip: text nicht
Outlook

Keine

Nur background-color zuverlässig. Für Hintergrundbilder VML verwenden
Thunderbird

Teilweise

background-size und background-clip funktionieren grundlegend
Yahoo Mail

Teilweise

background-size wird unterstützt. background-clip: text nicht

Steckbrief background Erweitert

Syntax: background: <bg-color> <bg-image> <bg-position> / <bg-size> <bg-repeat> <bg-origin> <bg-clip> <bg-attachment>
Initialwert: transparent none 0% 0% / auto repeat padding-box border-box scroll
Vererbt: Nein
Animierbar: Ja
Kurzform für: background-color, background-image, background-repeat, background-position, background-size, background-clip, background-origin, background-attachment

Kategorie: Farben & Hintergründe
Werte: 15
Beispiele: 5
Browser: 4 von 5
E-Mail: 1 von 5
Stand: 15.02.2026

Inhalt

7 Kapitel

Verwandt

background Grundlagen Farbverläufe color

Üben /lernen/css

Im CSS-Kurs gestaltest du echte Seiten selbst und prüfst jede Aufgabe direkt im Browser.

Zum CSS-Kurs

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