Vlastnosť background-size

Vlastnosť background-size nastavuje veľkosť obrázku pozadia. Hodnotou vlastnosti sú akékoľvek jednotky pre veľkosti, alebo kľúčové slová auto, cover alebo contain.

Syntax

selektor {
	background-size: hodnota;
}

Kľúčové slová

Hodnota	Popis
`auto`	Pozadie bude mať prirodzenú veľkosť, takú, akú má skutočná veľkosť obrázku pozadia. Ak je `auto` zadané len pre jednu stranu, tak po tejto strane sa pozadie zmenší tak, aby malo neskončené proporcie.
`cover`	Zmenší obrázok tak, aby pokryl celý blok s zachovaním pomerov. Obrázok sa bude snažiť zmestiť celý, ale nie vždy sa to podarí, preto nejaká jeho časť bude orezaná. Blok bude vždy pokrytý obrázkom celý.
`contain`	Zmenší obrázok tak, aby sa celý zmestil do bloku s zachovaním pomerov. Pritom môže zabrať alebo celú šírku, alebo celú výšku (závisí od pomerov obrázku a od rozmerov elementu). Blok vo všeobecnosti bude pokrytý obrázkom nie celý (avšak obrázok bude vždy viditeľný celý, aj keď v zmenšenej verzii).

Predvolená hodnota: auto.

Použitie

Jednotky pre veľkosti a auto môžu byť použité v rôznych kombináciách, napríklad tak: auto 20px, alebo 30% 20px, alebo auto 30% atď. V tomto prípade prvý parameter nastavuje veľkosť pozadia podľa šírky, a druhý parameter - veľkosť pozadia podľa výšky. Ak je zadaný jeden parameter - tak ten bude nastavovať veľkosť pozadia aj podľa šírky, aj podľa výšky súčasne.

Príklad

Teraz bude obrázok pozadia mať svoju prirodzenú veľkosť:

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

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

Príklad

Teraz bude obrázok pozadia veľkosti 300px na 400px (v našom prípade sa proporcie obrázku skreslia):

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

Príklad

Teraz bude obrázok pozadia veľkosti 400px na 400px (v našom prípade sa proporcie obrázku skreslia):

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

Príklad

Teraz bude obrázok pozadia veľkosti 400px vodorovne, a zvisle sa jeho veľkosť prispôsobí tak, aby proporcie neboli skreslené:

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

Príklad

Teraz bude obrázok pozadia veľkosti 400px zvisle, a vodorovne sa jeho veľkosť prispôsobí tak, aby proporcie neboli skreslené:

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

Príklad . Hodnota contain

Pozrite si fungovanie hodnoty 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;
}

Príklad . Hodnota cover

Pozrite si fungovanie hodnoty 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;
}

Príklad . Zlepšíme fungovanie cover

Fungovanie hodnoty cover sa dá zlepšiť, ak vycentrujeme obrázok pomocou vlastnosti background-position (v našom prípade na viditeľné časti začnú padať hlavy koní, a nie ich zadky):

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

Pozri tiež

vlastnosť background,
ktorá predstavuje vlastnosť-skratku pre pozadie