Својство background-size

Својство background-size задаје величину слике позадине. Вредности својства служе било које јединице за величине, или кључне речи auto, cover или contain.

Синтакса

селектор {
	background-size: вредност;
}

Кључне речи

Вредност	Опис
`auto`	Позадина ће имати природну величину, такву, какав је стварни размер слике позадине. Ако је `auto` задато само за једну страну, онда ће се по тој страни позадина скалирати тако, да има неизобличене пропорције.
`cover`	Скалира слику тако, да се њоме прекрије цео блок са очувањем пропорција. Слика ће се трудити да се смести у целини, али то неће увек бити могуће, па ће неки њен део бити одсечен. Блок ће увек бити прекривен сликом у целини.
`contain`	Скалира слику тако, да се у целини уклопи у блок са очувањем пропорција. При томе може да заузме или целу ширину, или целу висину (зависи од пропорција слике и од величина елемента). Блок у општем случају ће бити прекривен сликом не у целини (али ће слика увек бити видљива у целини, мада у смањеној варијанти).

Подразумевана вредност: auto.

Коришћење

Јединице за величине и auto могу бити коришћене у различитим комбинацијама, на пример, овако: auto 20px, или 30% 20px, или auto 30% и тако даље. У том случају први параметар задаје величину позадине по ширини, а други параметар - величину позадине по висини. Ако је наведен један параметар - онда он ће задавати величину позадине и по ширини, и по висини истовремено.

Пример

Сада ће позадинска слика имати своју природну величину:

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

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

Пример

Сада ће позадинска слика бити величине 300px на 400px (у нашем случају пропорције слике ће бити изобличене):

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

Пример

Сада ће позадинска слика бити величине 400px на 400px (у нашем случају пропорције слике ће бити изобличене):

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

Пример

Сада ће позадинска слика бити величине 400px по хоризонтали, а по вертикали њена величина ће се подесити тако, да пропорције не буду изобличене:

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

Пример

Сада ће позадинска слика бити величине 400px по вертикали, а по хоризонтали њена величина ће се подесити тако, да пропорције не буду изобличене:

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

Пример . Вредност contain

Погледајте на рад вредности 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;
}

Пример . Вредност cover

Погледајте на рад вредности 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;
}

Пример . Побољшамо рад cover

Рад вредности cover може се побољшати, ако се слика центрира уз помоћ својства background-position (у нашем случају на видљиве делове ће почињати да падају главе коња, а не њихова задњица):

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

Види још

својство background,
које представља својство-скраћеницу за позадину