Eigenschap background-size

De eigenschap background-size bepaalt de grootte van de achtergrondafbeelding. De waarde van de eigenschap zijn elke eenheid voor afmetingen, of de sleutelwoorden auto, cover of contain.

Syntaxis

selector {
	background-size: waarde;
}

Sleutelwoorden

Waarde	Beschrijving
`auto`	De achtergrond heeft de natuurlijke grootte, zoals de werkelijke grootte van de achtergrondafbeelding. Als `auto` alleen voor één zijde is ingesteld, dan wordt de achtergrond langs die zijde geschaald, zodat de verhoudingen behouden blijven.
`cover`	Schaalt de afbeelding zodat deze het hele blok bedekt met behoud van verhoudingen. De afbeelding zal proberen volledig te passen, maar dit zal niet altijd lukken, dus een deel ervan zal worden bijgesneden. Het blok zal altijd volledig door de afbeelding bedekt zijn.
`contain`	Schaalt de afbeelding zodat deze volledig in het blok past met behoud van verhoudingen. Hierbij kan het of de volledige breedte innemen, of de volledige hoogte (afhankelijk van de verhoudingen van de afbeelding en de afmetingen van het element). Over het algemeen zal het blok niet volledig door de afbeelding bedekt zijn (maar de afbeelding zal altijd volledig zichtbaar zijn, zij het in een verkleinde versie).

Standaardwaarde: auto.

Gebruik

Eenheden voor afmetingen en auto kunnen worden gebruikt in verschillende combinaties, bijvoorbeeld: auto 20px, of 30% 20px, of auto 30%, enzovoort. In dit geval bepaalt de eerste parameter de grootte van de achtergrond in de breedte, en de tweede parameter - de grootte van de achtergrond in de hoogte. Als één parameter is opgegeven - dan bepaalt deze zowel de breedte als de hoogte van de achtergrond tegelijkertijd.

Voorbeeld

Nu heeft de achtergrondafbeelding zijn natuurlijke grootte:

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

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

Voorbeeld

Nu heeft de achtergrondafbeelding een grootte van 300px op 400px (in ons geval worden de verhoudingen van de afbeelding vervormd):

<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;
}

Voorbeeld

Nu heeft de achtergrondafbeelding een grootte van 400px op 400px (in ons geval worden de verhoudingen van de afbeelding vervormd):

<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;
}

Voorbeeld

Nu heeft de achtergrondafbeelding een grootte van 400px in de breedte, en in de hoogte wordt de grootte aangepast zodat de verhoudingen niet worden vervormd:

<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;
}

Voorbeeld

Nu heeft de achtergrondafbeelding een grootte van 400px in de hoogte, en in de breedte wordt de grootte aangepast zodat de verhoudingen niet worden vervormd:

<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;
}

Voorbeeld . Waarde contain

Bekijk de werking van de waarde contain:

<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;
}

Voorbeeld . Waarde cover

Bekijk de werking van de waarde cover:

<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;
}

Voorbeeld . Verbeter de werking van cover

De werking van de waarde cover kan worden verbeterd door de afbeelding te centreren met behulp van de eigenschap background-position (in ons geval zullen er paardenhoofden zichtbaar zijn in plaats van hun achterkant):

<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;
}

Zie ook

de eigenschap background,
wat een verkorte eigenschap is voor de achtergrond