Как с помощью свойства background-position управлять расположением фоновых изображений?

Свойство background-position в CSS позволяет управлять положением фоновой картинки внутри элемента. 2 Значения свойства представляют собой набор вертикальных и горизонтальных координат, отсчёт которых начинается с левого верхнего угла. 4

Свойство может задаваться в разных единицах измерения: 5

• Пиксели (px). 5 Позволяют задать точное смещение в пикселях. 5 Например, background-position: 50px 100px; сдвинет картинку на 50 пикселей вправо и 100 пикселей вниз. 5
• Проценты (%). 5 Указывают смещение относительно размеров элемента. 5 Например, background-position: 25% 75%; сдвинет картинку на 25% ширины элемента вправо и на 75% высоты элемента вниз. 5
• Ключевые слова. 5 Позволяют использовать предзаданные позиции. 5 Для горизонтального смещения доступны left, center, right, а для вертикального — top, center, bottom. 5 Например, background-position: right bottom; разместит картинку в правом нижнем углу элемента. 5

Некоторые значения свойства background-position и их описание: 1

• background-position: left top; — изображение в левом верхнем углу; 1
• background-position: left center; — выравнивание изображения по центру слева; 1
• background-position: left bottom; — расположение изображения в левом нижнем углу; 1
• background-position: center top; — изображение в центре сверху; 1
• background-position: center center; — центрирование изображения по горизонтали и вертикали; 1
• background-position: center bottom; — выравнивание изображения по центру снизу; 1
• background-position: right top; — расположение изображения в правом верхнем углу; 1
• background-position: right center; — выравнивание изображения по центру справа; 1
• background-position: right bottom; — размещение изображения в правом нижнем углу. 1