Egenskapen background-size

Egenskapen background-size angir størrelsen på bakgrunnsbildet. Verdien til egenskapen er enhver enhet for størrelser, eller nøkkelordene auto, cover eller contain.

Syntaks

velger {
	background-size: verdi;
}

Nøkkelord

Verdi	Beskrivelse
`auto`	Bakgrunnen vil ha sin naturlige størrelse, slik som den faktiske størrelsen på bakgrunnsbildet. Hvis `auto` kun er angitt for en side, vil bakgrunnen skalere langs den siden, for å opprettholde uforstyrrede proporsjoner.
`cover`	Skalerer bildet slik at det dekker hele blokken med bevarte proporsjoner. Bildet vil prøve å passe helt inn, men det vil ikke alltid lykkes, så en del av det vil bli beskjæret. Blokken vil alltid være dekket av bildet helt.
`contain`	Skalerer bildet slik at det passer helt inn i blokken med bevarte proporsjoner. Den kan dermed oppta enten hele bredden, eller hele høyden (avhenger av bildets proporsjoner og elementets størrelser). Blokken vil generelt sett ikke være dekket av bildet helt (derimot vil bildet alltid være synlig i sin helhet, om enn i en forminsket versjon).

Standardverdi: auto.

Bruk

Enheter for størrelser og auto kan brukes i ulike kombinasjoner, for eksempel slik: auto 20px, eller 30% 20px, eller auto 30% og så videre. I dette tilfellet angir den første parameteren størrelsen på bakgrunnen i bredden, og den andre parameteren - størrelsen på bakgrunnen i høyden. Hvis en parameter er angitt - vil den angi størrelsen på bakgrunnen både i bredden og høyden samtidig.

Eksempel

Nå vil bakgrunnsbildet ha 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

Nå vil bakgrunnsbildet ha størrelsen 300px med 400px (i vårt tilfelle vil proporsjonene på bildet bli forvrengt):

<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

Nå vil bakgrunnsbildet ha størrelsen 400px med 400px (i vårt tilfelle vil proporsjonene på bildet bli forvrengt):

<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

Nå vil bakgrunnsbildet ha størrelsen 400px horisontalt, og vertikalt vil størrelsen justeres slik at proporsjonene ikke forvrenges:

<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

Nå vil bakgrunnsbildet ha størrelsen 400px vertikalt, og horisontalt vil størrelsen justeres slik at proporsjonene ikke forvrenges:

<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 . Verdien contain

Se hvordan verdien contain fungerer:

<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 . Verdien cover

Se hvordan verdien cover fungerer:

<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 . Forbedrer funksjonen til cover

Funksjonen til verdien cover kan forbedres hvis bildet sentreres ved hjelp av egenskapen background-position (i vårt tilfelle vil synlige deler begynne å fange opp hestenes hoder, og ikke bakdelene deres):

<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å

egenskapen background,
som er en snarveisegenskap for bakgrunn