CSS-Eigenschaft background-size
Die Eigenschaft background-size wird verwendet, um die Größe des Hintergrundbildes festzulegen.
Die Eigenschaft background-size ist eine der CSS3-Eigenschaften.
Diese Eigenschaft hat fünf Werte: auto, length, percentage, cover, contain.
auto setzt das Hintergrundbild in seiner ursprünglichen Größe. Es ist der Standardwert. length gibt die Höhe und Breite des Hintergrundbildes an. Negative Werte sind ungültig. percentage setzt die Höhe und die Breite des Hintergrundbildes anhand von Prozentwerten. Negative Werte sind ebenfalls ungültig.
cover skaliert das Bild so groß wie möglich, ohne es zu strecken. Wenn sich die Proportionen des Bildes von denen des Elements unterscheiden, wird es entweder vertikal oder horizontal zugeschnitten, sodass kein Leerraum bleibt.
contain passt die Größe des Hintergrundbildes so an, dass das Bild vollständig sichtbar ist.
Es gibt Bilder wie JPEGs, die intrinsische Größen und Proportionen haben, und Bilder wie Verläufe, die keine intrinsischen Größen und Proportionen haben. Sofern nicht anders angegeben, nehmen die zweiten immer die Größe des Hintergrundbereichs eines Elements ein.
Die Eigenschaft background-size kann auch durch Kommas getrennte Werte annehmen, und wenn das Element mehrere Hintergrundbilder hat, wird jeder der Werte auf ein passendes Hintergrundbild angewendet. Der erste Wert wird beispielsweise auf das erste background-image angewendet, der zweite Wert auf das zweite Bild usw.
| Anfangswert | auto |
|---|---|
| Gilt für | Alle Elemente. Sie gilt auch für ::first-letter und ::first-line. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Größe des Hintergrundbildes 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 oft mit der Kurzschreibweise background verwendet, zum Beispiel:
background: url("image.jpg") no-repeat center / cover;Beispiel für die 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("https://de.w3docs.com/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 Wert length angewendet. Er legt die Breite und Höhe des Hintergrundbildes fest. Der erste Wert setzt die Breite, und der zweite Wert setzt die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite auf auto gesetzt.
Sieh dir ein weiteres Beispiel an, in dem Breite und Höhe des Hintergrundbildes durch Prozentwerte definiert werden.
Beispiel für die Eigenschaft background-size mit dem Wert "%":
Beispiel der CSS-Eigenschaft background-size mit %- (Prozent-)Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-image: url("https://de.w3docs.com/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 macht das Bild so groß wie möglich, ohne es zu strecken.
Beispiel für die 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("https://de.w3docs.com/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 für die 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("https://de.w3docs.com/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 für die 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("https://de.w3docs.com/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 für die Eigenschaft background-size mit dem Wert "length":
Beispiel der Eigenschaft background-size mit dem Wert "length":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 260px;
height: 190px;
background: url("https://de.w3docs.com/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 | Play it |
|---|---|---|
| auto | Dies ist der Standardwert. Er setzt das Hintergrundbild in seiner ursprünglichen Größe. | Play it » |
| length | Legt die Breite und Höhe des Hintergrundbildes fest. Der erste Wert setzt die Breite und der zweite die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite auf auto gesetzt. Er wird durch „px“, „em“ angegeben. | Play it » |
| percentage | Legt Breite und Höhe anhand von Prozentwerten fest. Der erste Wert setzt die Breite und der zweite die Höhe. Wenn nur ein Wert angegeben wird, wird der zweite auf auto gesetzt. | Play it » |
| cover | Skaliert das Hintergrundbild so groß wie möglich, um den gesamten Hintergrundbereich abzudecken. | Play it » |
| contain | Skaliert das Hintergrundbild auf die größtmögliche Größe, sodass Breite und Höhe in den Hintergrundbereich passen. | Play it » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Play it » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Practice
In CSS, what are the possible values for the 'background-size' property?