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 сипаттамасы,
фон үшін қысқартылған сипаттама ретінде