CSS background-size Eigenschaft
Die background-size CSS-Eigenschaft legt die Größe des Hintergrundbilds fest. Erfahren Sie mehr über die Werte und probieren Sie Beispiele aus.
Die CSS-Eigenschaft background-size legt die gerenderte Größe des Hintergrundbilds eines Elements fest. Standardmäßig wird ein Hintergrundbild in seiner natürlichen (intrinsischen) Größe angezeigt; mit background-size können Sie es auf genaue Abmessungen skalieren, prozentual strecken oder es das Element automatisch ausfüllen oder daran anpassen lassen.
Diese Seite behandelt jeden Wert, den die Eigenschaft akzeptiert, den Unterschied zwischen den zwei nützlichsten Schlüsselwörtern (cover und contain), das Verhalten bei mehreren Hintergründen sowie ausführbare Beispiele für jeden Fall. Sie ist eine der CSS3-Eigenschaften.
Werte auf einen Blick
Die Eigenschaft akzeptiert folgende Werte:
auto— der Standardwert. Das Bild behält seine intrinsische Größe und Proportionen.<length>— explizite Breite und Höhe, z. B.300px 200px. Negative Werte sind ungültig.<percentage>— Größen relativ zum Hintergrund-Positionierungsbereich des Elements, z. B.40% 100%. Negative Werte sind ungültig.cover— das Bild wird (unter Beibehaltung des Seitenverhältnisses) so skaliert, bis es das Element vollständig bedeckt. Überlaufende Bereiche werden abgeschnitten.contain— das Bild wird (unter Beibehaltung des Seitenverhältnisses) so skaliert, bis es gerade in das Element passt. Es können Lücken entstehen.
Wenn Sie zwei Werte angeben, ist der erste die Breite und der zweite die Höhe. Wenn Sie nur einen Wert angeben, legt dieser die Breite fest, und die Höhe wird standardmäßig auf auto gesetzt, sodass das Seitenverhältnis des Bilds erhalten bleibt.
cover vs. contain — welches verwenden?
Diese beiden Schlüsselwörter werden am häufigsten verwendet und sind leicht zu verwechseln:
covergarantiert, dass kein leerer Bereich verbleibt — das Bild füllt die Box immer vollständig aus. Der Nachteil ist, dass Teile des Bilds abgeschnitten werden können, wenn sein Seitenverhältnis nicht mit dem Element übereinstimmt. Verwenden Sie es für Hero-Banner und vollflächige Abschnitts-Hintergründe, bei denen Sie keine Lücken haben möchten.containgarantiert, dass das gesamte Bild sichtbar ist — nichts wird abgeschnitten. Der Nachteil ist, dass leere Streifen an den Seiten oder oben/unten erscheinen können. Verwenden Sie es für Logos, Icons oder jedes Bild, das vollständig angezeigt werden muss.
Beide behalten das ursprüngliche Seitenverhältnis bei, sodass das Bild nie verzerrt wird. Um ein Bild auf genaue Abmessungen zu strecken (was es verzerren kann), verwenden Sie stattdessen explizite <length>- oder <percentage>-Werte.
Bilder mit und ohne intrinsische Größe
Einige Bilder, wie JPEG und PNG, haben intrinsische Größen und Proportionen. Andere, wie CSS-Verläufe, haben keine. Ein Bild ohne intrinsische Größe nimmt die volle Größe des Hintergrundbereichs des Elements ein, sofern Sie nichts anderes angeben. Daher verhält sich background-size bei Verläufen etwas anders als bei Rasterbildern.
Mehrere Hintergrundbilder
background-size akzeptiert kommagetrennte Werte. Wenn ein Element mehrere Hintergrundbilder hat, wird jede Größe einem Hintergrundbild der Reihe nach zugeordnet — der erste Wert gilt für das erste background-image, der zweite für das zweite usw.:
background-image: url("logo.png"), url("texture.png");
background-size: 100px 100px, cover;| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | Nein. |
| Animierbar | Ja. Die Größe des Hintergrundbilds ist animierbar. |
| Version | CSS3 |
| DOM-Syntax | object.style.backgroundSize = "50% 100%"; |
Syntax
Syntax der CSS-Eigenschaft background-size
background-size: auto | length | percentage | cover | contain | initial | inherit;Die Eigenschaft background-size wird häufig zusammen mit der background-Kurzschreibweise verwendet, zum Beispiel:
background: url("image.jpg") no-repeat center / cover;Beispiel der Eigenschaft background-size:
Beispiel der CSS-Eigenschaft background-size mit px-Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 300px 200px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Ergebnis
Im obigen Beispiel wird der Längenwert angewendet. Er legt die Breite und Höhe des Hintergrundbilds fest. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite auf auto gesetzt.
Sehen Sie sich ein weiteres Beispiel an, bei dem Breite und Höhe des Hintergrundbilds durch Prozentwerte definiert werden.
Beispiel der Eigenschaft background-size mit dem Wert "%":
Beispiel der CSS-Eigenschaft background-size mit % (Prozentwert)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: 40% 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Der Wert cover vergrößert das Bild so weit wie möglich, ohne es zu strecken.
Beispiel der Eigenschaft background-size mit dem Wert "cover":
Beispiel der CSS-Eigenschaft background-size mit dem Wert cover
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Beispiel der Eigenschaft background-size mit dem Wert "contain":
Beispiel der CSS-Eigenschaft background-size mit dem Wert "contain":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: contain;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Beispiel der Eigenschaft background-size mit dem Wert "auto":
Beispiel der CSS-Eigenschaft background-size mit dem Wert "auto":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
background-size: auto;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background size example.</h2>
<p>Here can be any information.</p>
</body>
</html>Beispiel der Eigenschaft background-size mit einem einzelnen Längenwert:
Hier wird ein einzelner Wert (260px) angegeben, sodass die Breite explizit festgelegt wird und die Höhe auf auto zurückfällt, wodurch das Seitenverhältnis des Bilds innerhalb eines <div> mit fester Größe erhalten bleibt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat;
background-size: 260px;
}
</style>
</head>
<body>
<h1>CSS background-size property </h1>
<p>Example of the background-size property with a length value.</p>
<div></div>
</body>
</html>Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| auto | Dies ist der Standardwert. Er zeigt das Hintergrundbild in seiner ursprünglichen Größe an. | Ausprobieren » |
| length | Legt die Breite und Höhe des Hintergrundbilds fest. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite auf auto gesetzt. Angabe erfolgt in "px", "em". | Ausprobieren » |
| percentage | Legt die Breite und Höhe in Prozent fest. Der erste Wert legt die Breite fest, der zweite die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite auf auto gesetzt. | Ausprobieren » |
| cover | Skaliert das Hintergrundbild so groß wie möglich, um den gesamten Hintergrundbereich abzudecken. | Ausprobieren » |
| contain | Skaliert das Hintergrundbild auf die größtmögliche Größe, sodass seine Breite und Höhe in den Hintergrundbereich passen. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Tipps und verwandte Eigenschaften
background-sizewird häufig mitbackground-positionundbackground-repeatkombiniert, um genau zu steuern, wie das Bild platziert und skaliert wird.- In der
background-Kurzschreibweise kommt die Größe nach der Position, getrennt durch einen Schrägstrich:background: url("image.jpg") no-repeat center / cover;. Die Position ist erforderlich, wenn Sie auf diese Weise eine Größe angeben. - Um ein
<img>-Element (statt eines CSS-Hintergrunds) zu skalieren und dabei das Zuschneiden zu steuern, verwenden Sieobject-fit, das dasselbecover- undcontain-Verhalten für ersetzte Elemente bietet. coverundcontainmachen ganzseitige oder responsive Hintergründe einfach: Die Kombination vonbackground-size: covermit einem festenbackground-attachmenterzeugt einen klassischen vollflächigen Hero-Hintergrund, der sich an jede viewport-Größe anpasst.