Свойство 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;
}

Результат:

Вижте също