Wichtigste Erkenntnisse
- background-size: cover füllt die Box, erhält dabei das Seitenverhältnis und schneidet den Überstand ab.
- background-size: contain erhält das vollständige Bild und lässt möglicherweise ungenutzten Raum frei.
- background-size: 100% 100% erzwingt eine exakte Passform und verzerrt abweichende Seitenverhältnisse.
„Strecken“ kann bedeuten, die Box zu füllen, das gesamte Bild zu erhalten, die Ränder zuzuschneiden, eine Textur zu wiederholen oder die Pixel bewusst zu verzerren. Diese Ergebnisse erfordern unterschiedliches CSS und sollten nicht als austauschbar behandelt werden.
Worauf es besonders ankommt
- Explizite Längen- oder Prozentwerte ermöglichen eine kontrollierte Skalierung für gestalterisch abgestimmte Layouts.
- background-repeat kann eine Fläche effizient füllen, wenn die Quelle als Kachel gestaltet ist.
- Die Funktion image-set kann Assets mit höherer Pixeldichte für Displays auswählen, die diese nutzen können.
Das beabsichtigte Größenverhalten definieren
Strecken ist mehrdeutig. Es kann bedeuten, eine Box zu füllen und dabei Ränder zuzuschneiden, das vollständige Bild mit Leerraum zu erhalten, das Bild in eine exakte Form zu zwingen, eine Kachel zu wiederholen oder auf explizite Abmessungen zu skalieren. Benennen Sie das gewünschte Ergebnis, bevor Sie eine CSS-Eigenschaft auswählen, denn jede Option hat unterschiedliche visuelle Auswirkungen und Folgen für die Performance.
Ein Hintergrundbild ist dekorative Farbe und trägt seinem Element keine intrinsische Breite oder Höhe bei. Der Container benötigt Inhalt, Abmessungen, eine Mindesthöhe, ein Seitenverhältnis oder eine andere Layout-Regel, bevor der Hintergrund sichtbar wird. Wenn das Bild wesentliche Bedeutung vermittelt, verwenden Sie stattdessen ein Element vom Typ img oder picture mit passendem Alternativtext.
Füllen
Verwenden Sie cover, wenn die Box vollständig ausgefüllt sein muss und ein Zuschnitt an den Rändern akzeptabel ist.
Einpassen
Verwenden Sie contain, wenn jedes Pixel der Quelle sichtbar bleiben muss.
Verzerren
Verwenden Sie eine unabhängige Skalierung von Breite und Höhe nur dann, wenn veränderte Proportionen beabsichtigt sind.
Die Box mit cover füllen
background-size: cover erhält das Seitenverhältnis der Quelle und skaliert das Bild, bis beide Container-Abmessungen ausgefüllt sind. Unterscheiden sich die Verhältnisse von Quelle und Container, ragt die längere Bilddimension über die Box hinaus und wird zugeschnitten. Der Browser weiß nicht, welches Motiv wichtig ist, daher kann eine zentrierte Positionierung dennoch ein Gesicht, ein Produkt oder eine Beschriftung abschneiden.
Nutzen Sie background-position, um einen freigegebenen Fokusbereich zu schützen, und testen Sie anschließend extreme Containerformen. Die prozentuale Positionierung basiert auf der Differenz zwischen der Containergröße und der gerenderten Bildgröße; deshalb richtet 100 % die äußeren Kanten aneinander aus, statt das Bild um eine volle Containerbreite zu verschieben. Ein separater, kompakter Zuschnitt ist sicherer, wenn eine einzelne Fokusposition nicht jedem Viewport gerecht wird.
.hero {
min-block-size: 24rem;
background-image: url('/media/landscape.webp');
background-position: 65% 40%;
background-size: cover;
background-repeat: no-repeat;
}Sinnvolle Einsatzfälle
Fotografische Hero-Bereiche, Karten und dekorative Panels, bei denen eine randlos gefüllte Fläche wichtiger ist als das Zeigen jeder Kante.
Warnsignal
Wenn zahlreiche breakpoint-spezifische Positionsanpassungen nötig sind, braucht die Komposition vermutlich ein anderes Derivat.
Das vollständige Bild mit contain erhalten
background-size: contain erhält das Seitenverhältnis und skaliert so lange, bis das gesamte Bild in den Container passt. Da eine Dimension unbedeckt bleiben kann, kombinieren Sie es mit einer bewusst gewählten Hintergrundfarbe oder einer dazu passenden Wiederholung. Diese Methode eignet sich für Logos, Diagramme oder dekorative Rahmen, deren vollständige Begrenzung sichtbar bleiben muss.
Contain garantiert keine Lesbarkeit, wenn die Quelle Text enthält. Bei schmalen Größen kann das vollständige Bildmaterial zu klein werden, obwohl nichts beschnitten wird. Wichtige Texte sollten HTML sein, und aussagekräftige Diagramme gehören in der Regel in semantisches Bild-Markup, in dem Alternativtext und responsive Quellensteuerung zur Verfügung stehen.
.product-diagram {
aspect-ratio: 16 / 9;
background: #f4f6f8 url('/media/diagram.svg') center / contain no-repeat;
}Umgebende Farbe wählen
Der unbedeckte Bereich ist Teil des Designs, keine versehentlich leere Fläche.
Minimal sinnvolle Größe prüfen
Das vollständige Bild zu erhalten hilft nicht, wenn seine wesentlichen Details unlesbar werden.
Exakte oder explizite Größenangaben mit Bedacht verwenden
background-size: 100% 100% skaliert beide Achsen unabhängig voneinander auf den Container. Das garantiert vollständige Abdeckung ohne Zuschnitt, verzerrt die Quelle aber, sobald die Seitenverhältnisse voneinander abweichen. Kreise werden zu Ovalen, Gesichter verändern ihre Form und Logos verlieren ihre beabsichtigte Geometrie. Reservieren Sie diese Methode für abstrakte Texturen oder bewusst flexibles Bildmaterial.
Größenangaben mit einem oder zwei Werten können Längen, Prozentwerte, auto oder viewport-bezogene Einheiten verwenden. Sie sind nützlich für Effekte der Art Direction, etwa ein Motiv mit fester Breite, das an einer Seite ausgerichtet ist. Denken Sie daran, dass sich Viewport-Einheiten am Viewport und nicht an der Komponente orientieren: Eine wiederverwendbare Karte kann daher einen überdimensionierten Hintergrund erhalten, wenn sie in ein unerwartetes Layout eingebettet wird.
Eine Achse erhalten
Ein Wert wie 100% auto skaliert die Breite, während die Höhe dem Seitenverhältnis der Quelle folgen kann.
Komponentenrelative Regeln bevorzugen
Verwenden Sie Containermaße oder Breakpoints, wenn das Bildmaterial zu einer wiederverwendbaren Komponente gehört.
Kacheln wiederholen und Hintergründe überlagern
Eine kleine, nahtlose Textur kann mit background-repeat eine große Fläche füllen, statt eine große Bitmap herunterzuladen. Steuern Sie die Wiederholung je Achse und prüfen Sie die Nahtstellen bei gängigen Zoomstufen und Pixeldichten. Wiederholen Sie keine fotografischen Motive und kein Bildmaterial mit sichtbaren Kanten, sofern die Wiederholung nicht Teil des Designs ist.
CSS unterstützt mehrere Hintergrundebenen, wobei die zuerst aufgeführte Ebene oben gezeichnet wird. Ein Verlauf kann über einem Foto liegen, um Text besser abzuheben, während eine Farbe den letzten Fallback bildet. Halten Sie Größen-, Positions- und Wiederholungswerte ebenenweise aufeinander abgestimmt, denn nicht übereinstimmende kommagetrennte Listen sind schwer zu debuggen.
Kacheleffizienz
Eine eigens erstellte Kachel kann die Übertragungsgröße reduzieren, doch zu viele Details können die wiederholte Fläche dennoch störend wirken lassen.
Zurückhaltung bei Ebenen
Jedes zusätzliche Bild kann einen weiteren Request, Decodierungsaufwand und Wartungsaufwand mit sich bringen.
Responsive Assets und Assets mit hoher Pixeldichte auswählen
Setzen Sie Media Queries ein, wenn der Container einen deutlich anderen Zuschnitt oder eine andere Quellgröße erfordert. image-set in CSS kann Kandidaten für Dichte oder Format einer Komposition bereitstellen, bietet aber nicht dieselbe breitenbasierte Auswahl und dasselbe semantische Verhalten wie picture und srcset. Nehmen Sie einen normalen background-image-Fallback auf, wenn die unterstützte Browsermatrix ihn erfordert.
Ein Kandidat für hohe Dichte sollte genügend Pixel für die gerenderte CSS-Größe und die Displaydichte enthalten, mehr ist aber nicht automatisch besser. Überdimensionierte Dateien erhöhen Übertragung, Decodierungsspeicher und Zeichenaufwand. Prüfen Sie auf echten Geräten, welchen Kandidaten der Browser anfordert, und stellen Sie sicher, dass er mit den erwarteten Headern gecacht wird.
Doppelte Downloads vermeiden
Testen Sie, dass Preload-Regeln, Basisdeklarationen, Media Queries und image-set nicht dazu führen, dass ungenutzte Kandidaten geladen werden.
Gerenderten Bedarf messen
Richten Sie die Maße der Derivate an den tatsächlichen Komponentengrößen aus, nicht an den beworbenen Geräteauflösungen.
Quellbilder für ihre Anzeigeflächen vorbereiten
Eine einzige Masterdatei passt selten gleichermaßen gut zu breiten Hero-Bereichen, quadratischen Karten und hohen mobilen Panels. Erzeugen Sie Derivate passend zu den tatsächlichen Containerverhältnissen und den erwarteten Pixelmaßen. Erhalten Sie das Seitenverhältnis der Quelle, wenn das gesamte Bild zählt, und erstellen Sie geprüfte Zuschnitte für Anzeigebereiche, die gefüllt werden müssen. Ob jede Komposition die Aussage bewahrt, entscheidet weiterhin die Anwendung.
Speichern Sie das Original separat, veröffentlichen Sie ausschließlich validierte Derivate und verwenden Sie in CSS stabile, versionierte Referenzen. Die Verarbeitung weniger, gezielt gewählter Varianten kostet in der Regel weniger als das Erzeugen jeder Größen- und Formatkombination. Überwachen Sie Ausgabemaße und Bytes, damit ein fehlerhafter Upload oder eine geänderte Verarbeitung die Auslieferungskosten nicht unbemerkt erhöht.
Zuschnitte prüfen
Die automatische Auswahl des Fokusbereichs ist für Kandidaten nützlich, doch Branding, Sicherheit und der Erhalt des Motivs erfordern menschliches Urteilsvermögen.
Eingaben normalisieren
Korrigieren Sie die Ausrichtung und weisen Sie unplausible Quellmaße zurück, bevor Sie Hintergründe für die Produktion ableiten.
Barrierefreiheit, Fehlerfälle und Betrieb testen
Halten Sie wesentliche Texte und Bedienelemente aus dem Hintergrund heraus. Prüfen Sie lesbaren Kontrast über jedem finalen Zuschnitt, sichtbaren Tastaturfokus, Textzoom, das Verhalten bei reduzierter Bewegung und einen nutzbaren Zustand mit einfarbiger Fläche, wenn das Bild nicht verfügbar ist. Ein fixiertes Hintergrund-Attachment kann auf Mobilgeräten schlecht performen oder sich anders verhalten; behandeln Sie es daher als Verbesserung und testen Sie die Zielgeräte.
Drosseln Sie das Netzwerk und prüfen Sie Layoutstabilität, Largest Contentful Paint, angeforderte Bytes, Cache-Status und Bildfehler. Testen Sie transparente Assets, fehlende Dateien, ungewöhnlich hohe Quellen und Container an beiden Extremen des Seitenverhältnisses. Sichern Sie Upload- und Verarbeitungsendpunkte mit vertrauenswürdiger Validierung, gegebenenfalls signierten Requests und Zugangsdaten, die niemals in öffentliches CSS oder Browser-Code gelangen.
Operative Prüfungen
Richten Sie Alarme für fehlende Derivate, Verarbeitungsfehler, unerwartete Dateigrößen und anhaltende Anstiege bei der Auslieferung ein.
Sicherer Rollout
Veröffentlichen Sie versionierte Assets, prüfen Sie das Rendering in der Produktion und stellen Sie dann die Referenzen um, während Sie ein bewährtes Rollback vorhalten.
Wissenswerte technische Details
- Mit cover skaliert der Browser so lange, bis beide Dimensionen die Box ausfüllen; mit contain skaliert er, bis beide Dimensionen hineinpassen. Das Seitenverhältnis der Quelle bleibt in beiden Fällen erhalten.
- Prozentuale Hintergrundpositionen werden aus der Differenz zwischen der Containergröße und der gerenderten Bildgröße berechnet, weshalb 100 % die äußeren Kanten bündig ausrichtet, statt um die volle Containerbreite zu verschieben.
- Hintergrundbilder steuern einem Element keine intrinsischen Abmessungen bei. Das Layout benötigt explizite Inhalte, Abmessungen, aspect-ratio oder Padding, bevor der Hintergrund sichtbaren Raum einnehmen kann.
- Mit 100% 100% werden beide Achsen unabhängig voneinander skaliert, wodurch Kreise, Gesichter, Logos und Text verzerrt werden, sobald sich Quell- und Zielseitenverhältnis unterscheiden.
- Mehrere CSS-Hintergründe werden in Listenreihenfolge gezeichnet, wobei die erste Ebene oben liegt; so können Verläufe Text schützen, ohne dass das ursprüngliche Bildmaterial bearbeitet werden muss.
- Bildkandidaten mit hoher Pixeldichte helfen nur, wenn ihre zusätzlichen Quellpixel zur gerenderten Größe passen; zu große Dateien kosten weiterhin Bandbreite und Speicher beim Decodieren.
Ein praxisnaher Ansatz
- 1
Benennen Sie das gewünschte visuelle Verhalten, bevor Sie eine background-size-Regel wählen.
- 2
Exportieren Sie Derivate passend zu den tatsächlichen Containerverhältnissen und den erwarteten gerenderten Abmessungen.
- 3
Legen Sie eine Hintergrundfarbe fest, damit sich Bereiche während des Ladens und transparente Bereiche kontrolliert verhalten.
- 4
Prüfen Sie die Zuschnitte bei extremen Inhalten und messen Sie die Übertragungsgröße auf Mobilgeräten.
Architekturgrenze
Die Größenangaben in CSS ändern, wie ein Bild gezeichnet wird, nicht die Quelldatei selbst. Die Anwendung muss entscheiden, ob das Bild beschnitten, wiederholt, verzerrt oder vollständig sichtbar dargestellt werden soll, und muss für diese Entscheidung geeignete Quelldateien bereitstellen.
Häufig gestellte Fragen
Was ist der Unterschied zwischen cover und contain?
Cover füllt den Container aus und kann Ränder beschneiden. Contain zeigt das gesamte Bild und kann unbedeckten Raum lassen. Beide erhalten das Seitenverhältnis der Quelle.
Wie kann ich einen Hintergrund ohne Verzerrung strecken?
Verwenden Sie cover, wenn Zuschneiden akzeptabel ist, oder contain, wenn leerer Raum akzeptabel ist. Unabhängige Werte wie 100% 100% verzerren jede Quelle, deren Seitenverhältnis vom Container abweicht.
Warum ist mein Hintergrundbild nicht sichtbar?
Das Element hat möglicherweise keinen Inhalt oder keine Abmessungen, die URL ist womöglich fehlgeschlagen, eine andere Ebene überdeckt es eventuell, oder die Deklaration wird überschrieben. Prüfen Sie die berechnete Größe und die Hintergrundeigenschaften des Elements und kontrollieren Sie anschließend die Netzwerkanfrage.
Sollten bedeutungstragende Bilder CSS-Hintergründe verwenden?
Meist nicht. Verwenden Sie img oder picture, wenn das Bild Informationen vermittelt, denn diese Elemente unterstützen Alternativtext, intrinsische Abmessungen und eine responsive Quellenauswahl.
Kann ein Bildverarbeitungsdienst den CSS-Größenmodus wählen?
Nein. Eine Bildpipeline kann Derivate erzeugen, die besser zu den beabsichtigten Seitenverhältnissen und Größen passen, aber die Anwendung muss entscheiden, ob CSS jedes Bild im tatsächlichen Layout zuschneiden, einpassen, wiederholen, verzerren oder neu positionieren soll.