Background-size xususiyati

background-size xususiyati fon rasmining hajmini belgilaydi. Xususiyat qiymati sifatida hajm o‘lchov birliklari, yoki auto, cover yoki contain kalit so‘zlari xizmat qiladi.

Sintaksis

selector {
	background-size: qiymat;
}

Kalit so‘zlar

Qiymat	Tavsif
`auto`	Fon tabiiy hajmda bo‘ladi, xuddi fon rasmining haqiqiy hajmi kabi. Agar `auto` faqat bir tomon uchun ko‘rsatilgan bo‘lsa, u holda bu tomonda fon nisbatlar buzilmasligi uchun masshtablanadi.
`cover`	Rasmni butun blokni qoplashi uchun nisbatlarni saqlagan holda masshtablaydi. Rasm butunlay sig‘ishga harakat qiladi, lekin bu har doim ham amalga oshmaydi, shuning uchun uning ba'zi qismlari kesilib qoladi. Blok har doim butunlay rasm bilan qoplanadi.
`contain`	Rasmni butunlay blokga sig‘ishi uchun nisbatlarni saqlagan holda masshtablaydi. Bunda u butun enni yoki butun balandlikni egallashi mumkin (bu rasm nisbati va element hajmlariga bog‘liq). Blok odatda butunlay rasm bilan qoplanmaydi (lekin rasm har doim butun holda ko‘rinadi, garchi kichraytirilgan bo‘lsa ham).

Standart qiymat: auto.

Qo‘llash

Hajm o‘lchov birliklari va auto turli xil kombinatsiyalarda qo‘llanishi mumkin, masalan: auto 20px, yoki 30% 20px, yoki auto 30% va hokazo. Bunda birinchi parametr fonning eni bo‘yicha hajmini, ikkinchi parametr esa fonning balandligi bo‘yicha hajmini belgilaydi. Agar bitta parametr ko‘rsatilgan bo‘lsa - u fonning ham eni, ham balandligi bo‘yicha hajmini bir vaqtning o‘zida belgilaydi.

Misol

Hozir fon rasmi o‘zining tabiiy hajmida bo‘ladi:

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

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

Misol

Hozir fon rasmi 300px ga 400px hajmda bo‘ladi (bizning holatda rasm nisbati buziladi):

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

Misol

Hozir fon rasmi 400px ga 400px hajmda bo‘ladi (bizning holatda rasm nisbati buziladi):

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

Misol

Hozir fon rasmi gorizontal bo‘yicha 400px hajmda bo‘ladi, balandlik bo‘yicha esa uning hajmi nisbatlar buzilmasligi uchun moslanadi:

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

Misol

Hozir fon rasmi balandlik bo‘yicha 400px hajmda bo‘ladi, gorizontal bo‘yicha esa uning hajmi nisbatlar buzilmasligi uchun moslanadi:

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

Misol . Contain qiymati

contain qiymatining ishlashini ko‘ring:

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

Misol . Cover qiymati

cover qiymatining ishlashini ko‘ring:

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

Misol . Cover ishlashini yaxshilash

cover qiymatining ishlashini yaxshilash mumkin, agar rasmni background-position xususiyati yordamida markazga joylashtirilsa (bizning holatda ko‘rinadigan qismlarga otlarning orqa qismlari emas, bosh qismlari tushadi):

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

Shuningdek qarang

fon uchun qisqartirilgan xususiyat bo‘lgan background xususiyati