Egenskaben background-size

Egenskaben background-size angiver størrelsen på baggrundsbilledet. Værdien for egenskaben er enhver enhed for størrelser, eller nøgleordene auto, cover eller contain.

Syntaks

selektor {
	background-size: værdi;
}

Nøgleord

Værdi	Beskrivelse
`auto`	Baggrunden vil have sin naturlige størrelse, som den faktiske størrelse på baggrundsbilledet. Hvis `auto` kun er angivet for en side, vil baggrunden skalere langs den side, så den bevarer dens proportioner uden forvrængning.
`cover`	Skalerer billedet, så det dækker hele blokken med bevaring af proportioner. Billedet vil forsøge at passe helt, men det vil ikke altid lykkes, så en del af det vil blive beskåret. Blokken vil altid blive dækket af billedet helt.
`contain`	Skalerer billedet, så det helt passer ind i blokken med bevaring af proportioner. Det kan enten optage hele bredden, eller hele højden (afhænger af billedets proportioner og elementets størrelser). Blokken vil generelt ikke blive dækket af billedet helt (derimod vil billedet altid være synligt helt, omend i en formindsket udgave).

Standardværdi: auto.

Brug

Enheder for størrelser og auto kan bruges i forskellige kombinationer, for eksempel sådan: auto 20px, eller 30% 20px, eller auto 30% osv. I dette tilfælde angiver den første parameter størrelsen på baggrunden i bredden, og den anden parameter - størrelsen på baggrunden i højden. Hvis der kun angives én parameter - vil den angive størrelsen på baggrunden både i bredden, og i højden samtidigt.

Eksempel

Nu vil baggrundsbilledet have sin naturlige størrelse:

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

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

Eksempel

Nu vil baggrundsbilledet være på 300px gange 400px (i vores tilfælde vil billedets proportioner blive forvrænget):

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

Eksempel

Nu vil baggrundsbilledet være på 400px gange 400px (i vores tilfælde vil billedets proportioner blive forvrænget):

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

Eksempel

Nu vil baggrundsbilledet være 400px i bredden, og i højden vil dens størrelse tilpasse sig, så proportionerne ikke forvrænges:

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

Eksempel

Nu vil baggrundsbilledet være 400px i højden, og i bredden vil dens størrelse tilpasse sig, så proportionerne ikke forvrænges:

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

Eksempel . Værdien contain

Se værdien contain i aktion:

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

Eksempel . Værdien cover

Se værdien cover i aktion:

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

Eksempel . Forbedring af cover

Virkningen af værdien cover kan forbedres, hvis billedet centreres ved hjælp af egenskaben background-position (i vores tilfælde vil hestenes hoveder begynde at være synlige i stedet for deres bagdele):

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

Se også

egenskaben background,
som er en sammentrækning af flere baggrundsegenskaber