CSS-Hintergründe: Farben, Verläufe und Bilder in Ebenen

Ein CSS-Hintergrund ist ein Stapel von Ebenen auf einem Element. Die Eigenschaft background akzeptiert eine durch Kommas getrennte Liste von Bildern und Verläufen, wobei das erste oben gezeichnet wird, plus eine einzelne Farbe ganz unten. Mehr brauchst du nicht für ein getöntes Hero-Foto, ein weiches Licht über einem Verlauf oder eine Textur über einer Markenfarbe, ganz ohne zusätzliche Elemente oder Wrapper. Der Rest ist zu wissen, wie die Kurzschreibweise ihre Werte liest.

Die background-Kurzschreibweise, Wert für Wert

Die Kurzschreibweise setzt bis zu acht Einzeleigenschaften auf einmal. Alle, die du weglässt, werden auf ihre Standardwerte zurückgesetzt, und das ist die häufigste Ursache für Fehler wie „warum ist meine Hintergrundgröße verschwunden“.

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

Wie Hintergrundebenen gestapelt werden

Liste die Ebenen von oben nach unten auf, durch Kommas getrennt. Jede Ebene kann eigene Position, Größe und Wiederholung haben, in jeder Einzeleigenschaft in derselben Reihenfolge angegeben. Nur die letzte Ebene darf eine Farbe enthalten. Stell es dir vor, als würdest du durch einen Stapel Transparentpapier nach unten schauen.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Nutze transparent in den äußeren Farbstopps, damit Lichter in alles darunter übergehen. Zu den Formen selbst siehe CSS radial-gradient und CSS-Mesh-Gradient.

Ein Verlauf über einem Hintergrundbild

Der nützlichste Ebenenhintergrund tönt ein Foto, damit Worte darauf lesbar sind. Setz eine Verlaufsebene an die erste Stelle und das Bild an die zweite. Ein Verlauf, der dort dunkel ist, wo der Text steht, und sonst klar, bewahrt viel mehr vom Foto als ein flaches dunkles Overlay.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

Verlaufs-Overlay bietet weitere Overlay-Rezepte, und Text über Bild erklärt, wann du besser die Worte verschiebst, statt das Bild abzudunkeln.

background-size, position und repeat

• cover füllt die Box und beschneidet, was übersteht. Richtig für Fotos und randlose Heros.
• contain passt das ganze Bild ein und lässt Lücken. Richtig für Logos und Illustrationen, die nicht beschnitten werden dürfen.
• Kombiniere cover mit einer bewussten background-position wie 50% 30%, damit der Ausschnitt das Gesicht oder das Produkt im Blick behält.
• Texturkacheln brauchen repeat und eine feste Größe, etwa 200px 200px, damit die Körnung bei jeder Bildschirmbreite gleich bleibt.
• background-attachment: fixed erzeugt auf dem Desktop einen Parallax-Look, aber viele mobile Browser ignorieren es, also verlass dich nie darauf.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

Eine weitere Einzeleigenschaft verdient ihren Platz: background-clip: text schneidet den Hintergrund auf die Form der Buchstaben zu, so entsteht Verlaufsschrift in CSS. Nutze sie für große Display-Wörter, setz eine feste color als Fallback und sieh dir CSS-Verlaufstext für das ganze Muster an.

Fehler, die du vermeiden solltest

Responsive und schnelle Hintergrundbilder

Mit image-set() wählt der Browser zwischen Formaten oder Auflösungen, ähnlich wie srcset bei einem img. Und weil Hintergrundbilder erst entdeckt werden, wenn das CSS geparst ist, kann ein Hero-Hintergrund spät ankommen; ein Preload-Hinweis im head behebt das.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

Oft ist der schnellste Hintergrund gar kein Bild. Gestapelte Verläufe kosten keinen Download, und eine winzige Körnungskachel bringt Textur für ein paar Kilobyte. Performance von CSS-Verläufen und WebP vs. PNG und JPG behandeln die Abwägungen. Wenn du Licht und Körnung lieber nicht von Hand abstimmen willst, gibt dir ein Gradiently Mark einen fertigen, unverwechselbaren Hintergrund in der Website-Hero-Größe 1920×1080, mit demselben Look wie deine Social Posts.