Свойство 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,
което е съкратено свойство за фона