Свойство background-position

Описание

Задаёт начальное положение фонового изображения, установленного с помощью свойства background-image.

Синтаксис

background-position: [left | center | right | проценты | размер] || [top | center | bottom | проценты> | размер];
Отношение между используемыми ключевыми словами и процентной записью:
  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • right top = top right = 100% 0% (в правом верхнем углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (в левом нижнем углу)
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
#im-t {
background-image: url('/files/images/regular/shar2.png');
background-color: #93c1f7; 
background-repeat: no-repeat;
height: 100%;
width: 49vw;
transition: 0.5s;
background-position: center center;
}
.von{
height: 100%;
display: block;
}
</style>
<div class='von'>
<div id='im-t'></div>
</div>
</body>
</html>

Читайте также

Функция radial-gradient()

Функция добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на ли...

Идентификатор

Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и ...

Свойство pointer-events

Позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсо...

Свойство flex-wrap

Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк.<br...

Свойство grid-gap

Определяет отступ между строками и столбцами grid сетки. <br>Сокращение для grid-row-gap и ...