Хусусияти 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,
ки хусусияти ихтисорёфта барои замина мебошад