Как сдвинуть 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.