Уласцівасць 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,
якая з'яўляецца ўласцівасцю-скарачэннем для фону