Уласцівасць 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;
}

Результат:

Глядзіце таксама