Хусусияти 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,
ки хусусияти ихтисорӣ барои фон мебошад