Својство 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,
кое претставува скратено својство за позадината