DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft background-size ist eine der nützlichsten – und komplexesten – Hintergrund-Eigenschaften. Es gibt viele Variationen und verschiedene Syntaxen, die Sie für diese Eigenschaft verwenden können, die alle unterschiedliche Anwendungsfälle haben. Hier ist ein grundlegendes Beispiel
html {
background: url(greatimage.jpg);
background-size: 300px 100px;
}Das ist ein Beispiel für die Zwei-Wert-Syntax für background-size. Es gibt vier verschiedene Syntaxen, die Sie mit dieser Eigenschaft verwenden können: die Schlüsselwort-Syntax, die Ein-Wert-Syntax, die Zwei-Wert-Syntax und die Mehrfachhintergrund-Syntax.
Schlüsselwörter
Zusätzlich zum Standardwert (auto) gibt es zwei Schlüsselwörter, die Sie mit background-size verwenden können: cover und contain
cover weist den Browser an, sicherzustellen, dass das Bild den gesamten Container *immer* bedeckt, auch wenn es das Bild strecken oder eine Kante abschneiden muss. contain hingegen sagt aus, dass das gesamte Bild *immer* angezeigt werden soll, auch wenn dadurch etwas Platz an den Seiten oder unten übrig bleibt.
Das Standard-Schlüsselwort – auto – weist den Browser an, die Größe automatisch anhand der tatsächlichen Bildgröße und des Seitenverhältnisses zu berechnen.
Ein Wert
Wenn Sie nur einen Wert angeben (z. B. background-size: 400px), zählt dieser für die Breite, und die Höhe wird auf auto gesetzt. Sie können jede CSS-Größeneinheit verwenden, die Sie möchten, einschließlich Pixel, Prozent, em, Viewport-Einheiten usw.
Zwei Werte
Wenn Sie zwei Werte angeben, setzt der erste die Breite des Hintergrundbilds und der zweite die Höhe. Ähnlich wie bei der Ein-Wert-Syntax können Sie beliebige Maßeinheiten verwenden, die Sie möchten.
Mehrere Bilder
Sie können auch die oben genannten Methoden kombinieren und auf mehrere Bilder anwenden, indem Sie einfach Kommas zwischen den einzelnen Syntaxen hinzufügen. Beispiel
html {
background: url(greatimage.jpg), url(wonderfulimage.jpg);
background-size: 300px 100px, cover;
/* first image is 300x100, second image covers the whole area */
}Behalten Sie die Stapelreihenfolge von Hintergrundbildern im Auge, wenn Sie mehrere Bilder verwenden.
Demo
Diese Demo zeigt Beispiele für cover, contain und mehrere Hintergrundbilder mit einer Mischung aus Pixel- und Schlüsselwortwerten.
Browser-Unterstützung
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 9+ | Alle | Alle | 3.6+ | Alle | Alle |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | 90+ | Alle |
Weitere Informationen
Ein kurzer Überblick über `object-fit` und `object-position`
Perfektes Vollbild-Hintergrundbild
Optimierung für großformatige Displays
Kreative Hintergrundmuster mit Farbverläufen, CSS-Formen und sogar Emojis
Mehr Kontrolle über CSS-Ränder mit background-image
Verwandte Eigenschaften
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-image
.element { background: url(texture.svg); }
background-origin
.element { background-origin: border-box; }
background-position
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
Wirklich hilfreich.
Sehr toller Artikel
Vielen Dank
Das ist cool, aber wenn man möchte, dass ein Karussell das gesamte Bild beibehält, wenn die Seite von einem Computer auf ein Handy reagiert, wie macht man das?
Wenn ich die 'cover'-Eigenschaft verwende, wie kann ich das Bild zentriert halten, auch wenn es für die Responsivität verkleinert wird?
Verwenden Sie einfach background-position, um das Hintergrundbild zu zentrieren. Zum Beispiel, um es horizontal oben zu zentrieren (wenn das das ist, was Sie brauchen)
background-size: cover;background-position: center 0;
Ich verwende einen SVG-Sprite, der während der Entwicklung ständig erweitert wird (d. h. die Abmessungen ändern sich ständig). Aus diesem Grund möchte ich keine zwei Werte für background-size angeben.
Es scheint, dass (Überraschung!) IE (Edge und 10) die Ein-Wert-Option nicht versteht.
Wie würden Sie vorschlagen, dieses Problem zu lösen?
Vergessen Sie es. Ich glaube, ich habe es herausgefunden!
Ich mache meinen SVG-Sprite zu einer einzigen Spalte. Glücklicherweise sind alle meine Icons gleich breit, also ist dies die Breite eines Icons: 40px.
Ich setze CSS background-size auf 100 %, was für IE funktioniert.
Der Sprite passt sich der Breite des enthaltenden Elements an (zusätzliche Höhe wird ausgeblendet) und passt sich an die Breite dieses Elements an.
Die Höhe des Sprites kann im Laufe des Projekts weiter wachsen, solange ich die Breite nie ändere und nur neue Icons unten hinzufüge.
Ich steuere die background-position nur über die vertikale Eigenschaft. Horizontal ist immer Null.
Voilà!
Möchten Sie ein kleineres (20px breites) Icon? Ändern Sie die Breite des enthaltenden Elements auf 20px und halbieren Sie die vertikale Positionsverschiebung, um die Icons zu ändern.
Die Verwendung von cover und contain verzerrt die Abmessungen meines Hintergrundbilds. Gibt es eine Möglichkeit, dafür zu sorgen, dass beim Größenwechsel des Bilds, um es in die Div einzupassen, die Abmessungen auf ihr ursprüngliches Verhältnis beschränkt werden und Überlappungen außerhalb der Div ausgeblendet werden? Auf diese Weise wird mein Bild nicht verzerrt, sondern an den Seiten abgeschnitten.
Mein Freund, Sie wissen nicht, wie viel Zeit ich damit verbracht habe, eine richtige Lösung für „Wie mache ich ein Bild in einem Container passend?“ zu finden. Ihr seid großartig. Traurig ist, dass es Tonnen von Tutorials gibt, die Experten, die Gurus, die Inhalte nach Inhalten erstellen, aber sie vergessen immer kleine Dinge, die unsere kostbare Zeit sparen könnten. Ihr seid solide... Großer Fan.