Mastering Background Position CSS for Perfect Image placement

Свойство CSS background-position устанавливает начальное положение фонового изображения внутри элемента. С помощью background-position можно задать положение фонового изображения как по оси X, так и по оси Y.

Синтаксис: background-position: x-координата y-координата;

Например, чтобы установить положение фонового изображения вверху слева элемента, нужно использовать:

css
background-position: left top;

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

css
background-position: 50% 0;

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

css
background-position: center top;

Можно также использовать ключевые слова, такие как top, right, bottom, left, center. Например:

css
background-position: left center;

Пример использования:

css
div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
}

Этот код установит фоновое изображение 'background.jpg' по центру элемента div.

Кроме того, можно комбинировать свойство background-position с другими свойствами, такими как background-size, чтобы изменить размер и положение фонового изображения внутри элемента.

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

css
background: url('background.jpg') no-repeat center center/cover;

Этот код устанавливает фоновое изображение 'background.jpg' в полный размер, выравнивает его по центру элемента и запрещает повторять его на всех сторонах.