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;
}