Background-position xassəsi

background-position xassəsi elementin fon şəklinin mövqeyini təyin edir. Mövqeyi hər hansı ölçü vahidləri ilə təyin etmək olar. Birinci qiymət soldan boşluğu, ikincisi isə yuxarıdan boşluğu göstərir.

Mövqeyi açar sözlərlə də təyin etmək olar. Bu halda qiymətlərin sırası vacib deyil. Şaquli üçün açar sözlər: top, center, bottom. Üfüqi üçün açar sözlər: left, center, right.

Açar sözlərlə necə işləmək olar

Şəkli açar sözlə yerləşdirmək üçün şaquli və üfüqi üçün birər qiymət göstərmək lazımdır. Məsələn, top right qiyməti göstərilsə, şəkil yuxarı sağda yerləşəcək.

Sözlərin sırası vacib deyil: top right yazmaq olar, right top də yazmaq olar. center açar sözü varsa - onu buraxmaq olar. Məsələn, top center ilə sadəcə top eynidir. center center isə sadəcə center ilə eynidir.

Sintaksis

selektor {
	background-position: iki qiymət boşluqla;
}

Nümunə

Standart olaraq fon şəkli yuxarı sol küncdə olacaq:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini yuxarı sağ küncə yerləşdirək:

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

#elem {
	background-position: top right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini aşağı sağ küncə yerləşdirək:

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

#elem {
	background-position: bottom right;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini sağda və şaquli mərkəzdə yerləşdirək:

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

#elem {
	background-position: right center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini blokun mərkəzində yerləşdirək:

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

#elem {
	background-position: center center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini soldan 20px və yuxarıdan 40px məsafədə yerləşdirək:

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

#elem {
	background-position: 20px 40px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini soldan 90% və yuxarıdan 100% məsafədə yerləşdirək:

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

#elem {
	background-position: 90% 100%;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini soldan 30px məsafədə və şaquli aşağıda yerləşdirək:

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

#elem {
	background-position: 30px bottom;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini soldan 30px məsafədə və şaquli mərkəzdə yerləşdirək:

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

#elem {
	background-position: 30px center;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Nümunə

Gəlin fon şəklini yuxarıdan 30px məsafədə və üfüqi mərkəzdə yerləşdirək:

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

#elem {
	background-position: center 30px;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Həmçinin bax

fon üçün qısa xassə olan background xassəsi