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

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

Свойство right

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не ...

Свойство min-height

Устанавливает минимальную высоту элемента.<br><br>Значение высоты элемента будет вычи...

Пустые элементы

Представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста...

Свойство direction

Предназначено для web - сайтов, в которых имеет значение направление текста.<br />Например,...

Стиль поля формы с атрибутом readonly

Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифициров...