Как увеличить background CSS

Чтобы увеличить фон элемента в CSS, мы можем использовать свойства background-size и background-position.

background-size определяет размер фонового изображения. Мы можем использовать значение cover, чтобы масштабировать изображение таким образом, чтобы оно полностью покрывало заданную область без искажения пропорций. Мы также можем использовать значение contain, чтобы масштабировать изображение таким образом, чтобы оно поместилось в область заданного размера, не искажая его пропорции.

Например, если мы хотим увеличить фон элемента на 150% относительно его исходного размера, мы можем использовать следующий CSS-код:

.element {
  background-size: 150%;
}

Для установки фона на полную ширину и высоту элемента можно использовать комбинацию значений background-size и background-position.

.element {
  background-size: cover;
  background-position: center;
}

В данном случае, установка background-size на cover позволяет масштабировать изображение таким образом, чтобы оно покрыло фон элемента без искажений. А свойство background-position устанавливает позицию изображения внутри фона. Установка значения center центрирует изображение по вертикали и горизонтали.