User Avatar

Свойство 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('https://mfs.gki-webik.ru/s?path=/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>

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

Свойство content

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

Применяется совместно с псевдоэле...

Свойство visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которо...

Свойство list-style-image

Указывает адрес изображения, которое служит в качестве маркера списка....

Свойство grid-template-columns

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