# CSS-Hintergründe: Farben, Verläufe und Bilder in Ebenen [Canonical HTML page](https://gradiently.design/de/guide/css-background-image) Eine einzige Eigenschaft kann ein Foto, eine Tönung darüber, ein weiches Licht in der Ecke und eine Fallback-Farbe darunter halten. Sobald die Ebenenreihenfolge sitzt, braucht der Großteil der Hintergrundeffekte nur eine Zeile. ## The short version - Die CSS-Eigenschaft background kann mehrere durch Kommas getrennte Ebenen halten, und die zuerst genannte Ebene wird oben gezeichnet. - Eine Hintergrundfarbe lässt sich nur einmal setzen, in der letzten Ebene, und sie erscheint unter jedem Bild und jedem Verlauf. - In der background-Kurzschreibweise muss background-size mit einem Schrägstrich auf background-position folgen, wie in center / cover. - Eine Verlaufsebene in derselben Deklaration über eine Bildebene zu legen ist der einfachste Weg, ein Foto für lesbaren Text zu tönen. - In CSS gesetzte Bilder werden später entdeckt als img-Elemente, daher braucht ein wichtiges Hero-Bild eventuell einen Preload-Hinweis. 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“. | Einzeleigenschaft | Was sie steuert | Übliche Werte | | --- | --- | --- | | `background-color` | Die Farbe unter jeder Ebene | `#0f0b1e`, `oklch(20% 0.05 290)` | | `background-image` | Bilder und Verläufe, durch Kommas getrennt | `url(photo.webp)`, `linear-gradient(…)` | | `background-position` | Wo jede Ebene sitzt | `center`, `top right`, `50% 30%` | | `background-size` | Wie groß jede Ebene ist | `cover`, `contain`, `200px auto` | | `background-repeat` | Ob sie gekachelt wird | `no-repeat`, `repeat`, `repeat-x` | | `background-attachment` | Scrollt mit dem Element oder dem Viewport | `scroll`, `fixed`, `local` | | `background-origin` und `background-clip` | Von welcher Box sie ausgeht und worauf sie zugeschnitten wird | `padding-box`, `border-box`, `text` | Die vollständige Referenz steht auf [der background-Seite von MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background). ```css .hero { /* image | position / size | repeat | colour */ background: url("harbour.webp") center 30% / cover no-repeat #0f172a; } ``` Der Schrägstrich ist Pflicht: Die Größe darf nur direkt nach der Position stehen. Die Farbe kommt zuletzt und ist zu sehen, solange das Bild lädt. ## 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. - Ebene 1: rosa Licht: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)` - Ebene 2: blaues Licht: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)` - Ebene 3: Indigo-Grund: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)` Drei Ebenen einzeln gezeigt. Die ersten beiden laufen ins Transparente aus, sodass der Grund überall durchscheint, wo sie nicht malen. ```css .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; } ``` Dieselben drei Ebenen in einer Deklaration gestapelt, die oberste zuerst, mit einer festen Fallback-Farbe ganz unten. Nutze `transparent` in den äußeren Farbstopps, damit Lichter in alles darunter übergehen. Zu den Formen selbst siehe [CSS radial-gradient](https://gradiently.design/de/guide/css-radial-gradient) und [CSS-Mesh-Gradient](https://gradiently.design/de/guide/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. ```css .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; } ``` Dunkel links, wo die Überschrift steht, klar rechts, wo das Foto zu sehen sein soll. Ein breiter Website-Hero mit einer Überschrift über einem gleichmäßig abgedunkelten Hintergrund Ein flaches Overlay macht Text lesbar, indem es alles gleichmäßig abdunkelt. Derselbe Hero, bei dem nur die Seite hinter der Überschrift ruhiger und dunkler ist Eine gerichtete Ebene dunkelt nur dort ab, wo die Worte stehen, und lässt den Rest der Szene hell. [Verlaufs-Overlay](https://gradiently.design/de/guide/gradient-overlay) bietet weitere Overlay-Rezepte, und [Text über Bild](https://gradiently.design/de/guide/text-over-image) 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. ```css .card { background: url("grain.png") 0 0 / 200px 200px repeat, linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%); } ``` Eine kleine wiederholte Körnungskachel über einem warmen Verlauf. Die Einstellungen pro Ebene folgen jedem Bild, daher bleibt der Verlauf von der Kachelgröße unberührt. 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](https://gradiently.design/de/guide/css-gradient-text) für das ganze Muster an. ## Fehler, die du vermeiden solltest ### Vermeiden - `background-size` setzen und danach die Kurzschreibweise, die es zurücksetzt - Eine Farbe in einer anderen als der letzten Ebene - Keine Fallback-Farbe, sodass Text unlesbar ist, solange das Bild lädt - Ein riesiges Foto für eine 400 Pixel breite Box - Wichtige Inhalte nur in einem Hintergrundbild, unsichtbar für Screenreader ### Machen - Erst die Kurzschreibweise, dann einzelne Überschreibungen - Eine Farbe, am Ende der Liste - Eine Fallback-Farbe nah am durchschnittlichen Ton des Bildes - Bilder in Boxgröße, ausgeliefert als WebP oder AVIF - Bedeutungstragende Bilder als `img` mit Alt-Text; Dekoration als Hintergrund ## 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. ```html ``` Der Browser nimmt das erste Format, das er unterstützt. Der Preload sorgt dafür, dass das Hauptbild früh heruntergeladen wird. 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](https://gradiently.design/de/guide/css-gradient-performance) und [WebP vs. PNG und JPG](https://gradiently.design/de/guide/webp-images) 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. ## FAQ ### Wie füge ich in CSS ein Hintergrundbild hinzu? Nutze `background: url("image.webp") center / cover no-repeat;` am Element, mit einer Fallback-Farbe am Ende, falls das Bild langsam lädt. ### Wie lege ich einen Verlauf über ein Hintergrundbild? Liste in einer `background`-Deklaration zuerst den Verlauf und dann das Bild, durch ein Komma getrennt. Die erste Ebene wird oben gezeichnet. ### Kann ich in CSS mehrere Hintergründe nutzen? Ja. Trenne Ebenen mit Kommas; jede kann eigene Position, Größe und Wiederholung haben, und nur die letzte Ebene darf eine Farbe enthalten. ### Was ist der Unterschied zwischen background-size cover und contain? `cover` füllt das ganze Element und beschneidet den Überstand; `contain` zeigt das ganze Bild und kann leeren Raum darum lassen. ### Warum funktioniert mein background-size nicht mehr? Die Kurzschreibweise `background` setzt jede Einzeleigenschaft zurück, die sie nicht nennt. Setz `background-size` nach der Kurzschreibweise oder nimm es mit Schrägstrich nach der Position in die Kurzschreibweise auf.