Background-origin xususiyati

background-origin xususiyati elementga nisbatan fon rasmining (aynan rasm, emas fon to'ldirish) qanday joylashishini belgilaydi: fon rasmining bir qismi chegarasi ostiga kiradi, fon chegarasi ostiga kirmaydi yoki fon faqat element mazmuni ustida joylashadi (ya'ni padding fonni surib qo'yadi).

Sintaksis

selector {
	background-origin: padding-box | border-box | content-box;
}

Qiymatlar

Qiymat	Tavsif
`border-box`	Fon rasmisi chegarasi ostiga kiradi.
`padding-box`	Fon rasmisi chegarasi ostiga kirmaydi.
`content-box`	Fon rasmisi faqat mazmun ustida bo'ladi.

Standart qiymat: padding-box.

Eslatmalar

background-origin xususiyati ishlamaydi, qachonki background-attachment qiymati fixed bo'lsa. Shuningdek background-repeat qiymati repeat bo'lganda background-origin xususiyati har doim border-box qiymatidagidek ishlaydi.

Misol . Standart holatda

Standart holatda fon chegarasi ostiga kirmaydi:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Misol . Border-box qiymati

Hozir fon chegarasi ostiga kiradi:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Misol . Content-box qiymati

Endi fon padding orqali suriladi:

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Misol . Background-repeat: repeat bilan

background-repeat qiymati repeat bo'lganda background-origin xususiyati har doim border-box qiymatidagidek ishlaydi, ya'ni fon har doim chegarasi ostiga kiradi:

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Shuningdek qarang

background-clip xususiyati,
bu ham fon rasmisi, ham fon to'ldirish joylashishini belgilaydi
background xususiyati,
fon uchun qisqartirilgan xususiyat hisoblanadi