background-position xususiyati

background-position xususiyati element fon tasvirining joylashishini belgilaydi. Joylashishni har qanday o‘lchov birliklari yordamida belgilash mumkin. Birinchi qiymat chap tomondan chetni, ikkinchisi - yuqoridan chetni bildiradi.

Shuningdek, kalit so‘zlar yordamida ham joylashishni belgilash mumkin. Bunda qiymatlarning tartibi muhim emas. Vertikal uchun kalit so‘zlar: top, center, bottom. Gorizontal uchun kalit so‘zlar: left, center, right.

Kalit so‘zlar bilan qanday ishlash kerak

Tasvirni kalit so‘z yordamida joylashtirish uchun vertikal va gorizontal uchun bittadan qiymat ko‘rsatish kerak. Masalan, top right qiymati ko‘rsatilsa, tasvir yuqori o‘ng tomonda joylashadi.

So‘zlarning tartibi muhim emas: top right yozish mumkin, yoki right top yozish mumkin. Agar center kalit so‘zi mavjud bo‘lsa - uni tushirib qoldirish mumkin. Masalan, top center, top bilan bir xil. center center esa center bilan bir xil.

Sintaksis

selector {
	background-position: ikkita qiymat probel orqali;
}

Misol

Standart bo‘yicha fon tasviri yuqori chap burchakda bo‘ladi:

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

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

Misol

Keling, fon tasvirini yuqori o‘ng burchakka joylashtiramiz:

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

Misol

Keling, fon tasvirini pastki o‘ng burchakka joylashtiramiz:

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

Misol

Keling, fon tasvirini o‘ng tomonda va vertikal markazda joylashtiramiz:

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

Misol

Keling, fon tasvirini blok markazida joylashtiramiz:

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

Misol

Keling, fon tasvirini chap tomondan 20px va yuqoridan 40px masofada joylashtiramiz:

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

Misol

Keling, fon tasvirini chap tomondan 90% va yuqoridan 100% masofada joylashtiramiz:

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

Misol

Keling, fon tasvirini chap tomondan 30px masofada va vertikal pastki qismida joylashtiramiz:

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

Misol

Keling, fon tasvirini chap tomondan 30px masofada va vertikal markazda joylashtiramiz:

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

Misol

Keling, fon tasvirini yuqoridan 30px masofada va gorizontal markazda joylashtiramiz:

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

Shuningdek qarang

background xususiyati,
fon uchun qisqartirilgan xususiyat hisoblanadi