Свойство 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>Читайте также
Свойство min-width
Устанавливает минимальную ширину элемента.<br><br>Значение ширины элемента будет вычи...
Функция repeating-linear-gradient()
Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему дей...
Свойство unicode-bidi
В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст...
Свойство border-top-right-radius
Устанавливает радиус скругления правого нижнего угла рамки.<br>Если рамка не задана, то скр...
Свойство max-width
Устанавливает максимальную ширину элемента.<br><br>Значение ширины элемента будет выч...