CSS Background Size: управляем размером фона

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

Свойство background-size может принимать следующие значения:

1. cover - изображение растягивается по всей области фона элемента, сохраняя при этом свои пропорции, при этом может урезаться часть изображения, которая не помещается в рамках элемента.

Например:

css
div {
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

2. contain - изображение также растягивается по всей области фона, но сохраняет пропорции и при этом настраивается на максимально возможное уменьшение, чтобы всё изображение вместилось в рамки элемента.

Например:

css
div {
  background-image: url('path/to/image.jpg');
  background-size: contain;
}

3. auto - это значение используется по умолчанию, оно позволяет изображению сохранять свои исходные размеры и отображаться в исходном качестве.

Например:

css
div {
  background-image: url('path/to/image.jpg');
  background-size: auto;
}

4. Пиксели - можно установить размер фона в определенном количестве пикселей по горизонтали и вертикали.

css
div {
  background-image: url('path/to/image.jpg');
  background-size: 200px 100px;
}

Также можно использовать проценты, например:

css
div {
  background-image: url('path/to/image.jpg');
  background-size: 50% 70%;
}

Это значит, что фон будет занимать 50% ширины и 70% высоты элемента.

Используя свойство background size, можно добиться нужных эффектов отображения фоновых изображений, улучшить пользовательский интерфейс и зрительное восприятие страницы в целом.