Хосияти 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-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`,
ки хосияти мухтасари замина мебошад