Уласцівасць 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,
якое з'яўляецца ўласцівасцю-скарачэннем для фону