background-origin касиети

background-origin касиети элементке салыштырмалуу фондогу сүрөттү (так сүрөттү, төптөмө эмес) кантип жайгаштырууну аныктайт: фондогу сүрөттүн бир бөлүгү чектөөнүн астына кирип, фон чектөөнүн астына кирбейт же фон элементтин мазмунунун үстүндө гана жайгашат (башкача айтканда, 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 касиети,
ал фон үчүн кыскартылган касиет