Свойство background-size

Свойство background-size фон расмининг ҳажмини белгилайди. Свойство қиймати сифатида ҳар қандай ҳажм ўлчов бирликлари, ёки auto, cover ёки contain калит сўзлари хизмат қилади.

Синтаксис

селектор {
	background-size: қиймат;
}

Калит сўзлар

Қиймат	Тасниф
`auto`	Фон ўзининг табиий ҳажмида бўлади, яъни фон расмининг ҳақиқий ўлчамида. Aгар `auto` фақат бир тараф учун белгиланган бўлса, у ҳолда шу тараф бўйича фон ўз нисбатларини бузмасдан миқёсланади.
`cover`	Расмни блокнинг тўлиқ қоплаши учун ўз нисбатларини сақлаб ҳар томонлама миқёслайди. Расм тўлиқ сиғишга ҳаракат қилади, лекин бу ҳар доим амалга ошмайди, шунинг учун унинг бирор қисми кесиб ташланади. Блок ҳар доим расм томонидан тўлиқ қопланади.
`contain`	Расмни ўз нисбатларини сақлаб блокга тўлиқ сиғиши учун миқёслайди. Бунда у ёки тўла эни, ёки тўла бўйни эгаллаши мумкин (расм нисбатлари ва элемент ўлчамларига боғлиқ). Блок умуман олганда расм томонидан тўлиқ қопланмайди (лекин расм ҳар доим тўлиқ кўринади, гарчи кичкинаритган бўлса-да).

Стандарт қиймат: auto.

Ишлатилиши

Ҳажм ўлчов бирликлари ва auto турли хил комбинацияларда ишлатилиши мумкин, масалан, шундай: auto 20px, ёки 30% 20px, ёки auto 30% ва ҳоказо. Бунда биринчи параметр фоннинг энни бўйича ҳажмини, иккинчи параметр эса фоннинг бўйи бўйича ҳажмини белгилайди. Aгар битта параметр кўрсатилган бўлса - у фоннинг ҳам эни, ҳам бўйи бўйича ҳажмини бир вактда белгилайди.

Мисол

Ҳозир фон расми ўзининг табиий ҳажмида бўлади:

<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 қийматининг ишлашини яхшилаш мумкин, aгар расмни 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,
фон учун қисқартирилган свойство сифатида хизмат қилувчи