Как сдвинуть background image css
Для определения позиции изображения относительно родительского блока, используется свойство background-position. У данного свойства есть два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Вместо использования ключевых слов, положение можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
Например:
- top left = left top = 0% 0% (в левом верхнем углу)
- top = top center = center top = 50% 0% (по центру вверху)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- bottom right = right bottom = 100% 100% (в правом нижнем углу)
Пример стилей:
body {
/* путь до изображения*/
background-image: url(path_to_my_image.jpeg),
/* позиционирование */
background-position: right bottom;
}
Для сдвига фонового изображения в CSS используется свойство background-position.
Основной синтаксис выглядит так:
.element {
background-image: url('путь/к/изображению.jpg');
background-position: X Y;
}
Где X и Y - это значения, определяющие горизонтальное и вертикальное смещение соответственно. Эти значения могут быть в пикселях, процентах или ключевых словах, как left, center, right для X; top, center, bottom для Y.
.element {
background-image: url('image.jpg');
background-position: 20px 50%;
background-repeat: no-repeat;
}
В примере выше мы сдвигаем изображение на 20 пикселей вправо и разместит его вертикально по центру элемента. Также надо помнить, что background-position работает вместе с другими свойствами фона, такими как background-repeat и background-size.
