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

С помощью свойства background-position в CSS можно управлять положением фонового изображения внутри элемента. 4 По умолчанию фон размещается в верхнем левом углу элемента. 1

Некоторые способы выравнивания изображения с помощью background-position:

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

Указывать значения background-position можно с помощью пикселей, процентов или ключевых слов: left, center, right, top и bottom. 2