Background-size xassəsi

background-size xassəsi fon şəklinin ölçüsünü təyin edir. Xassənin dəyəri kimi istənilən ölçü vahidləri, ya da auto, cover və ya contain açar sözləri istifadə oluna bilər.

Sintaksis

selektor {
	background-size: dəyər;
}

Açar sözlər

Dəyər	Təsvir
`auto`	Fon öz təbii ölçüsündə olacaq, yəni fon şəklinin həqiqi ölçüsü kimi. Əgər `auto` yalnız bir tərəf üçün təyin edilibsə, onda həmin tərəfdə fon tənasübü pozulmamaq şərti ilə ölçülənəcək.
`cover`	Şəkli tənasübü qoruyaraq, bütün bloku örtəcək şəkildə miqyaslayır. Şəkil bütövlükdə sığmağa çalışacaq, lakin bu həmişə bacarılmayacaq, ona görə də onun hansısa bir hissəsi kəsilə bilər. Blok həmişə şəkl ilə tamamilə örtüləcək.
`contain`	Şəkli tənasübü qoruyaraq, bloka tam sığacaq şəkildə miqyaslayır. Bu zaman o, ya bütün eni, ya da bütün hündürlüyü tuta bilər (şəklin tənasübündən və elementin ölçülərindən asılı olaraq). Blok ümumiyyətlə şəkil ilə tam örtülməyəcək (lakin şəkil həmişə bütövlükdə, azaldılmış variantda da olsa, görünəcək).

Standart dəyər: auto.

İstifadə

Ölçü vahidləri və auto müxtəlif kombinasiyalarda istifadə oluna bilər, məsələn, belə: auto 20px, ya da 30% 20px, ya da auto 30% və s. Bu zaman birinci parametr fonun eni boyu ölçüsünü, ikinci parametr isə fonun hündürlüyü boyu ölçüsünü təyin edir. Əgər bir parametr göstərilibsə - o, həm eni, həm də hündürlüyü eyni zamanda təyin edəcək.

Nümunə

İndi fon şəkli öz təbii ölçüsündə olacaq:

<div id="elem"></div>

#elem {
	background-repeat: no-repeat;
	background-image: url("bg.png");
	border: 1px solid black;
	width: 550px;
	height: 400px;
}

Nümunə

İndi fon şəkli 300px 400px ölçüsündə olacaq (bizim vəziyyətimizdə şəklin tənasübü pozulacaq):

<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;
}

Nümunə

İndi fon şəkli 400px 400px ölçüsündə olacaq (bizim vəziyyətimizdə şəklin tənasübü pozulacaq):

<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;
}

Nümunə

İndi fon şəkli üfüqi istiqamətdə 400px ölçüsündə olacaq, şaquli istiqamətdə isə onun ölçüsü tənasübün pozulmaması üçün uyğunlaşacaq:

<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;
}

Nümunə

İndi fon şəkli şaquli istiqamətdə 400px ölçüsündə olacaq, üfüqi istiqamətdə isə onun ölçüsü tənasübün pozulmaması üçün uyğunlaşacaq:

<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;
}

Nümunə . Contain dəyəri

contain dəyərinin işini nəzərdən keçirin:

<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;
}

Nümunə . Cover dəyəri

cover dəyərinin işini nəzərdən keçirin:

<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;
}

Nümunə . Cover işini yaxşılaşdırmaq

cover dəyərinin işini yaxşılaşdırmaq olar, əgər şəkli background-position xassəsi ilə mərkəzləşdirsək (bizim vəziyyətimizdə görünən hissələrə atların başı deyil, onların arxası düşəcək):

<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;
}

Həmçinin bax

fon üçün qısaldılmış xassə olan background xassəsi