Eigenschaft background-size

Die Eigenschaft background-size legt die Größe des Hintergrundbildes fest. Als Wert der Eigenschaft dienen beliebige Einheiten für Größen, oder die Schlüsselwörter auto, cover oder contain.

Syntax

Selektor {
	background-size: Wert;
}

Schlüsselwörter

Wert	Beschreibung
`auto`	Der Hintergrund hat seine natürliche Größe, wie die tatsächliche Größe des Hintergrundbildes. Wenn `auto` nur für eine Seite angegeben ist, wird der Hintergrund entlang dieser Seite skaliert, um das Seitenverhältnis beizubehalten.
`cover`	Skaliert das Bild so, dass es den gesamten Block abdeckt und dabei das Seitenverhältnis beibehält. Das Bild wird versuchen, vollständig hineinzupassen, was nicht immer gelingt, sodass ein Teil des Bildes abgeschnitten wird. Der Block wird immer vollständig vom Bild abgedeckt.
`contain`	Skaliert das Bild so, dass es vollständig in den Block passt und dabei das Seitenverhältnis beibehält. Dabei kann es entweder die gesamte Breite oder die gesamte Höhe einnehmen (abhängig vom Seitenverhältnis des Bildes und den Abmessungen des Elements). Der Block wird im Allgemeinen nicht vollständig vom Bild abgedeckt (dafür ist das Bild jedoch immer vollständig sichtbar, wenn auch in verkleinerter Version).

Standardwert: auto.

Verwendung

Einheiten für Größen und auto können in verschiedenen Kombinationen verwendet werden, zum Beispiel so: auto 20px, oder 30% 20px, oder auto 30% und so weiter. In diesem Fall legt der erste Parameter die Größe des Hintergrunds in der Breite fest, und der zweite Parameter - die Größe des Hintergrunds in der Höhe. Wenn ein Parameter angegeben ist - legt dieser die Größe des Hintergrunds sowohl in der Breite, als auch in der Höhe gleichzeitig fest.

Beispiel

Jetzt hat das Hintergrundbild seine natürliche Größe:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

Beispiel

Jetzt hat das Hintergrundbild die Größe 300px mal 400px (in unserem Fall wird das Seitenverhältnis des Bildes verzerrt):

<div id="elem"></div>

#elem {
	background-size: 300px 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Beispiel

Jetzt hat das Hintergrundbild die Größe 400px mal 400px (in unserem Fall wird das Seitenverhältnis des Bildes verzerrt):

<div id="elem"></div>

#elem {
	background-size: 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Beispiel

Jetzt hat das Hintergrundbild die Größe 400px in der Breite, und in der Höhe passt sich seine Größe so an, dass das Seitenverhältnis nicht verzerrt wird:

<div id="elem"></div>

#elem {
	background-size: 400px auto;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Beispiel

Jetzt hat das Hintergrundbild die Größe 400px in der Höhe, und in der Breite passt sich seine Größe so an, dass das Seitenverhältnis nicht verzerrt wird:

<div id="elem"></div>

#elem {
	background-size: auto 400px;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 400px;
	height: 400px;
}

Beispiel . Wert contain

Sehen Sie sich die Wirkung des Wertes contain an:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Beispiel . Wert cover

Sehen Sie sich die Wirkung des Wertes cover an:

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Beispiel . Wir verbessern die Wirkung von cover

Die Wirkung des Wertes cover kann verbessert werden, wenn das Bild mit der Eigenschaft background-position zentriert wird (in unserem Fall werden die sichtbaren Teile die Köpfe der Pferde sein, und nicht ihre Hinterteile):

<div id="elem1" class="elem"></div>
<div id="elem2" class="elem"></div>
<div id="elem3" class="elem"></div>
<div id="elem4" class="elem"></div>
<div id="elem5" class="elem"></div>
<div id="elem6" class="elem"></div>

.elem {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	margin-bottom: 20px;
}

#elem1 {
	width: 600px;
	height: 500px;
}

#elem2 {
	width: 500px;
	height: 600px;
}

#elem3 {
	width: 400px;
	height: 400px;
}

#elem4 {
	width: 300px;
	height: 400px;
}

#elem5 {
	width: 200px;
	height: 400px;
}

#elem6 {
	width: 300px;
	height: 100px;
}

Siehe auch

die Eigenschaft background,
die eine Kurzschreibweise für den Hintergrund darstellt