background Erweitert

Zuletzt aktualisiert am 15. Februar 2026

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.

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

background-size

background-clip

background-origin

background-attachment

Beispiele

cover vs. contain

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.

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

Gradient-Text mit background-clip: text

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

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

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

/* 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>

Multiple Backgrounds

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.

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

Shorthand vs. Einzeleigenschaften

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

/* 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

• 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.
• background-clip: text ohne -webkit- Prefix: Safari braucht noch -webkit-background-clip: text. Immer beide Varianten angeben, um alle Browser abzudecken.
• 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.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften