background-position հատկությունը

background-position հատկությունը սահմանում է տարրի ֆոնային պատկերի տեղադրությունը: Տեղադրությունը կարելի է սահմանել օգտագործելով ցանկացած չափման միավոր: Առաջին արժեքը նշանակում է ձախից բացատ, երկրորդը՝ վերևից բացատ:

Կարելի է նաև սահմանել դիրքը բանալի բառերով: Այս դեպքում արժեքների հերթականությունը կարևոր չէ: Ուղղահայացության համար բանալի բառերն են՝ top, center, bottom: Հորիզոնականի համար բանալի բառերն են՝ left, center, right:

Ինչպես օգտագործել բանալի բառերը

Պատկերը բանալի բառով տեղադրելու համար անհրաժեշտ է նշել մեկ արժեք ուղղահայացության և մեկը՝ հորիզոնականի համար: Օրինակ, եթե նշենք top right արժեքը, ապա պատկերը կտեղադրվի վերևի աջ մասում:

Բառերի հերթականությունը կարևոր չէ՝ կարելի է գրել top right, կամ՝ right top: Եթե կա center բանալի բառը - այն կարելի է բաց թողնել: Օրինակ, top center-ը նույնն է, ինչ պարզապես top-ը: Իսկ center center-ը նույնն է, ինչ պարզապես center-ը:

Շարահյուսություն

ընտրիչ {
	background-position: երկու արժեք բացատով;
}

Օրինակ

Լռելյայնորեն ֆոնային պատկերը կլինի վերևի ձախ անկյունում:

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

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը վերևի աջ անկյունում:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը ներքևի աջ անկյունում:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը աջ կողմում և ուղղահայացորեն կենտրոնում:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը բլոկի կենտրոնում:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 20px հեռավորության վրա ձախից և 40px վերևից:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 90% հեռավորության վրա ձախից և 100% վերևից:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 30px հեռավորության վրա ձախից և ուղղահայացորեն ներքևից:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 30px հեռավորության վրա ձախից և ուղղահայացորեն կենտրոնում:

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

Օրինակ

Եկեք տեղադրենք ֆոնային պատկերը 30px հեռավորության վրա վերևից և հորիզոնականորեն կենտրոնում:

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

Տես նաև

background հատկությունը,
որը ֆոնի համար նախատեսված հապավումային հատկություն է