Xüsusiyyət background-origin

Xüsusiyyət background-origin təyin edir ki, fon şəkli (məhz şəkil, rəng doldurma deyil) elementə nisbətən necə yerləşdiriləcək: fon şəklinin bir hissəsi çərçivənin altına keçəcək, fon çərçivənin altına keçməyəcək ya da fon yalnız elementin məzmunu üzərində yerləşəcək (yəni padding fonu uzaqlaşdıracaq).

Sintaksis

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

Dəyərlər

Dəyər	Təsvir
`border-box`	Fon şəkli çərçivənin altına keçər.
`padding-box`	Fon şəkli çərçivənin altına keçməz.
`content-box`	Fon şəkli yalnız məzmun üzərində olar.

Susmaya görə dəyər: padding-box.

Qeydlər

Xüsusiyyət background-origin işləmir, background-attachment fixed dəyərinə malik olduqda. Həmçinin background-repeat repeat dəyərində olduqda, background-origin xüsusiyyəti həmişə border-box dəyərində olduğu kimi işləyir.

Nümunə . Susmaya görə

Susmaya görə fon çərçivənin altına keçməyəcək:

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

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

Nümunə . Dəyər border-box

İndi fon çərçivənin altına keçəcək:

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

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

Nümunə . Dəyər content-box

İndi isə fon padding vasitəsi ilə uzaqlaşdırılacaq:

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

Nümunə . background-repeat: repeat olduqda

background-repeat xüsusiyyəti repeat dəyərində olduqda, background-origin xüsusiyyəti həmişə border-box dəyərində olduğu kimi işləyir, yəni fon həmişə çərçivənin altına keçir:

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

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

Həmçinin bax

xüsusiyyət background-clip,
ki, həm fon şəklinin, həm də rəng doldurmanın mövqeyini təyin edir
xüsusiyyət background,
fon üçün qısa yazılış xüsusiyyətidir