Lastnost background-size

Lastnost background-size določa velikost slike ozadja. Vrednost lastnosti so poljubne enote za velikosti, ali ključne besede auto, cover ali contain.

Sintaksa

selektor {
	background-size: vrednost;
}

Ključne besede

Vrednost	Opis
`auto`	Ozadje bo imelo naravno velikost, kot je dejanska velikost slike ozadja. Če je `auto` določeno samo za eno stran, potem se bo po tej strani ozadje skaliralo tako, da bo ohranilo nespremenjena razmerja.
`cover`	Skalira sliko tako, da prekrije celoten blok z ohranjanjem razmerij. Slika se bo trudila, da bi se prilegala v celoti, vendar se to ne bo vedno izšlo, zato bo nekateri njen del obrezan. Blok bo vedno v celoti prekrit s sliko.
`contain`	Skalira sliko tako, da se v celoti prilega v blok z ohranjanjem razmerij. Pri tem lahko zasede ali celotno širino, ali celotno višino (odvisno od razmerij slike in od velikosti elementa). Blok na splošno ne bo v celoti prekrit s sliko (vendar bo slika vedno vidna v celoti, čeprav v zmanjšani različici).

Privzeta vrednost: auto.

Uporaba

Enote za velikosti in auto se lahko uporabijo v različnih kombinacijah, na primer takole: auto 20px, ali 30% 20px, ali auto 30% in tako naprej. V tem primeru prvi parameter določa velikost ozadja po širini, drugi parameter pa velikost ozadja po višini. Če je naveden en parameter - potem bo določal velikost ozadja tako po širini, kot po višini hkrati.

Primer

Trenutno bo slika ozadja imela svojo naravno velikost:

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

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

Primer

Trenutno bo slika ozadja velika 300px na 400px (v našem primeru se bodo razmerja slike popačila):

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

Primer

Trenutno bo slika ozadja velika 400px na 400px (v našem primeru se bodo razmerja slike popačila):

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

Primer

Trenutno bo slika ozadja velika 400px vodoravno, navpično pa se bo njena velikost prilagodila tako, da razmerja ne bodo popačena:

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

Primer

Trenutno bo slika ozadja velika 400px navpično, vodoravno pa se bo njena velikost prilagodila tako, da razmerja ne bodo popačena:

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

Primer . Vrednost contain

Oglejte si delovanje vrednosti 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;
}

Primer . Vrednost cover

Oglejte si delovanje vrednosti 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;
}

Primer . Izboljšajmo delovanje cover

Delovanje vrednosti cover je mogoče izboljšati, če sliko centriramo s pomočjo lastnosti background-position (v našem primeru bodo na vidne dele začele prihajati glave konj, ne pa njihova zadnjica):

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

Glejte tudi

lastnost background,
ki predstavlja okrajšavo za ozadje