Egenskapen background-size

Egenskapen background-size anger storleken på bakgrundsbilden. Värdet på egenskapen är vilka enheter för storlekar som helst, eller nyckelorden auto, cover eller contain.

Syntax

selektor {
	background-size: värde;
}

Nyckelord

Värde	Beskrivning
`auto`	Bakgrunden kommer att ha sin naturliga storlek, sådan som den faktiska storleken på bakgrundsbilden. Om `auto` endast anges för en sida, kommer bakgrunden på den sidan skalas så att den har oförvrängda proportioner.
`cover`	Skalar bilden så att den täcker hela blocket med bevarade proportioner. Bilden kommer att försöka passa helt, men det kommer inte alltid att lyckas, så någon del av den kommer att beskäras. Blocket kommer alltid att täckas av bilden helt.
`contain`	Skalar bilden så att den får plats helt i blocket med bevarade proportioner. Den kan då antingen ta upp hela bredden, eller hela höjden (beror på bildens proportioner och på elementets storlekar). Blocket kommer i allmänhet inte att täckas av bilden helt (däremot kommer bilden alltid att synas helt, om än i en förminskad version).

Standardvärde: auto.

Användning

Enheter för storlekar och auto kan användas i olika kombinationer, till exempel så här: auto 20px, eller 30% 20px, eller auto 30% och så vidare. I detta fall anger den första parametern storleken på bakgrunden i bredd, och den andra parametern - storleken på bakgrunden i höjd. Om en parameter anges - kommer den att ange storleken på bakgrunden både i bredd, och i höjd samtidigt.

Exempel

Nu kommer bakgrundsbilden att ha sin naturliga storlek:

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

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

Exempel

Nu kommer bakgrundsbilden att vara 300px gånger 400px (i vårt fall kommer bildens proportioner att förvrängas):

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

Exempel

Nu kommer bakgrundsbilden att vara 400px gånger 400px (i vårt fall kommer bildens proportioner att förvrängas):

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

Exempel

Nu kommer bakgrundsbilden att vara 400px i horisontell led, och i vertikal led kommer dess storlek att anpassas så att proportionerna inte förvrängs:

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

Exempel

Nu kommer bakgrundsbilden att vara 400px i vertikal led, och i horisontell led kommer dess storlek att anpassas så att proportionerna inte förvrängs:

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

Exempel . Värdet contain

Se hur värdet contain fungerar:

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

Exempel . Värdet cover

Se hur värdet cover fungerar:

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

Exempel . Förbättra funktionen hos cover

Funktionen hos värdet cover kan förbättras, om man centrerar bilden med hjälp av egenskapen background-position (i vårt fall kommer huvuden på hästarna att synas, istället för deras bakdelar):

<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 även

egenskapen background,
som är en genvägsegenskap för bakgrunden