background-position сипаттамасы

background-position сипаттамасы элемент фон суретінің орналасуын белгілейді. Орналасуды кез келген өлшем бірліктері арқылы белгілеуге болады. Бірінші мән сол жақтан шеттеу, екіншісі - жоғарыдан шеттеу.

Сондай-ақ, орнын кілт сөздер арқылы белгілеуге болады. Бұл жағдайда мәндердің реті маңызды емес. Тік бағыттағы кілт сөздер: top, center, bottom. Көлденең бағыттағы кілт сөздер: left, center, right.

Кілт сөздерді қалай қолдануға болады

Суреттің орнын кілт сөзбен белгілеу үшін, тік және көлденең бағыттар үшін бір-бір мән көрсету керек. Мысалы, top right мәнін көрсетсек, сурет жоғарғы оң жақ бұрышта орналасады.

Сөздердің реті маңызды емес: top right деп жазуға болады, ал right top деп те жазуға болады. Егер center кілт сөзі болса - оны өткізіп жіберуге болады. Мысалы, top center деген top дегенмен бірдей. Ал center center деген center дегенмен бірдей.

Синтаксис

cssселектор {
  background-position: екі мән бос орын арқылы;
}

Мысал

Әдепкі бойынша фон суреті жоғарғы сол бұрышта болады:

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

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

Результат:

Мысал

Фон суретін жоғарғы оң жақ бұрышқа орналастырайық:

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

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

Результат:

Мысал

Фон суретін төменгі оң жақ бұрышқа орналастырайық:

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

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

Результат:

Мысал

Фон суретін оң жақта және тік бағытта ортасында орналастырайық:

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

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

Результат:

Мысал

Фон суретін блоктың ортасына орналастырайық:

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

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

Результат:

Мысал

Фон суретін сол жақтан 20px және жоғарыдан 40px қашықтыққа орналастырайық:

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

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

Результат:

Мысал

Фон суретін сол жақтан 90% және жоғарыдан 100% қашықтыққа орналастырайық:

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

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

Результат:

Мысал

Фон суретін сол жақтан 30px және тік бағытта төменгі жағына орналастырайық:

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

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

Результат:

Мысал

Фон суретін сол жақтан 30px және тік бағытта ортасына орналастырайық:

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

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

Результат:

Мысал

Фон суретін жоғарыдан 30px және көлденең бағытта ортасына орналастырайық:

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

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

Результат:

Сондай-ақ қараңыз