Свойство background-origin

Свойство background-origin элементга нисбатан фон расмни (аynан расм,  эмас тўлдириш) қандай жойлаштиришни белгилайди:  фон расмининг бир қисми чегара остига кириб қолади,  фон чегара остига кирмайди ёки фон факат элементнинг  мўзжам устида жойлашади (яъни padding  фонни сүриб чиқаради).

Синтаксис

селектор {
	background-origin: padding-box | border-box | content-box;
}

Қийматлар

Қиймат	Тасниф
`border-box`	Фон расми чегара остига кириб қолади.
`padding-box`	Фон расми чегара остига кирмайди.
`content-box`	Фон расми факат мўзжам устида бўлади.

Стандарт қиймат: padding-box.

Эътибор

Свойство background-origin ишламайди,  қачонки background-attachment  ниймати fixed бўлганда. Шунингдек, background-repeat  ниймати repeat бўлганда, background-origin  свойствоси доим border-box нийматидаги каби ишлайди.

Мисол . Стандарт холда

Стандарт холда фон чегара остига кирмайди:

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

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

Мисол . border-box ниймати

Ҳозир фон чегара остига киради:

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

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

Мисол . content-box ниймати

Энди фон padding орқали сүриб чиқарилади:

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

Мисол . background-repeat: repeat бўлганда

background-repeat ниймати repeat бўлганда,  background-origin свойствоси доим border-box  нийматидаги каби ишлайди, яъни фон доим чегара остига киради:

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

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

Шунингдек қаранг

свойство background-clip,
у фон расми ҳам, тўлдириш ҳам учун жойлашни белгилайди
свойство background,
фон учун қисқартирилган свойство ҳисобланади