background-size

дозволяє коригувати розміри зображення шляхом налаштування необхідної ширини та висоти. Якщо не вказати висоту, вона буде розрахована автоматично зі збереженням пропорцій.

/* Вихідні розміри зображення, значення за замовчуванням */
background-size: auto auto;

/* Ширина 200px, висота буде пропорційна */
background-size: 200px;

/* Ширина 200px, висота 300px */
background-size: 200px 300px;

1. Значення cover:

Гарантовано зберігає пропорції зображення.
Зображенню задані мінімальні розміри, за яких воно заповнить фон всього елемента.
Якщо пропорції зображення та елемента різні, частина зображення по вертикалі або горизонталі візуально обрізається.

2. Значення contain:

Гарантовано зберігає пропорції зображення.
Зображенню задані максимально можливі розміри, за яких воно повністю поміщається в елемент.
Зображення може не закрити весь фон елемента по вертикалі або горизонталі, якщо пропорції блоку та зображення не збігаються.

.hero {
  background-color: #2a2a2a;
  background-image: url(шлях до зображення);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}