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 қасиеті,
фон үшін қысқартылған қасиет ретінде көрсетілген