CSS Background Position: How to Align Your Images Perfectly

CSS свойство background-position позволяет задавать позицию фонового изображения относительно контейнера.

Синтаксис:

background-position: X Y;

Здесь X и Y могут быть заданы в следующих единицах измерения:

• px – пиксели;
• % – проценты;
• top – верх контейнера;
• bottom – низ контейнера;
• left – левый край контейнера;
• right – правый край контейнера;
• center – центр контейнера.

Например, чтобы задать фоновому изображению позицию в центре контейнера, можно использовать следующий код:

background-position: center center;

Также можно задать разные значения для горизонтальной и вертикальной позиций:

background-position: left top;

Это установит фоновое изображение в левый верхний угол контейнера.

Кроме того, можно использовать отрицательные значения, чтобы сместить фоновое изображение в определенном направлении:

background-position: -10px -20px;

Это сместит фоновое изображение на 10 пикселей влево и 20 пикселей вверх относительно начальной позиции.

Пример кода:

.container {

width: 500px;

height: 300px;

background-image: url("my-image.jpg");

background-position: center center; /* фон в центре контейнера */

}

.container2 {

width: 400px;

height: 400px;

background-image: url("my-image2.jpg");

background-position: left top; /* фон в левом верхнем углу */

}

.container3 {

width: 600px;

height: 200px;

background-image: url("my-image3.jpg");

background-position: -10px -20px; /* фон смещен на 10px влево и 20px вверх */

}