Background-origin hossasy

background-origin hossasy elemente garanyňda fon suratynyň (ýöne suratyň, dolgunyň däl) nähili ýerleşjekdigini kesgitleýär: fon suratynyň bir bölegi çyzgy astynda ýerleşer, fon çyzgy astynda ýerleşmez ýa-da fon diňe elementdäki mazmunyň üstünde ýerleşer (ýagny padding fony aýryp goýar).

Sintaksis

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

Bahalar

Baha	Düşündiriş
`border-box`	Fon suraty çyzgy astynda ýerleşer.
`padding-box`	Fon suraty çyzgy astynda ýerleşmez.
`content-box`	Fon suraty diňe mazmunyň üstünde ýerleşer.

Bellenen bahasy: padding-box.

Bellikler

background-origin hossasy işlemez, background-attachment hossasynda fixed bahasy bolanda. Şeýle hem background-repeat hossasynda repeat bahasy bolanda, background-origin hossasy hemişe border-box bahasyndaky ýaly işleýär.

Mysal . Bellenen ýagdaýy

Bellenen ýagdaýynda fon çyzgy astynda ýerleşmez:

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

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

Mysal . Border-box bahasy

Häzir fon çyzgy astynda ýerleşer:

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

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

Mysal . Content-box bahasy

Indi fon padding arkaly aýrylar:

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

Mysal . Background-repeat: repeat bolanda

background-repeat hossasynda repeat bahasy bolanda, background-origin hossasy hemişe border-box bahasyndaky ýaly işleýär, ýagny fon hemişe çyzgy astynda ýerleşer:

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

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

Şeýle hem göz aňyňyzdan geçiriň

background-clip hossasy,
hem fon suratynyň, hem dolgunyň ýerleşişini kesgitleýär
background hossasy,
fon üçin gysgaldylan hossadyr