Изображение фона на весь экран с помощью CSS

Растянуть картинку на весь экран — это пара строк CSS. Вешаем фон на body, говорим браузеру масштабировать под размер окна, и всё работает само, в том числе при ресайзе.

body {
    min-height: 100dvh;
    background: url('bg.jpg') no-repeat center / cover;
}

Здесь вся соль в двух местах. center / cover — это сокращённая запись: позиция фона (по центру) и его размер (cover) в одной строке, без отдельного background-size. А 100dvh вместо 100vh — чтобы на мобилках прячущаяся адресная строка не оставляла пустую полосу внизу.

cover или contain

Оба значения масштабируют картинку с сохранением пропорций, но ведут себя по-разному:

cover — картинка покрывает весь блок целиком. Лишнее обрезается по краям. Это то, что нужно для фона на весь экран.
contain — картинка целиком влезает в блок. По бокам или сверху-снизу могут остаться поля. Нужно реже — когда важно видеть изображение полностью.

Отдаём avif и webp с фоллбэком

Фоновая картинка на весь экран — самый жирный запрос на странице. Гонять туда JPEG, когда есть avif и webp, это возить воду в решете. Через image-set() браузер сам выберет формат, который умеет, и откатится на JPEG, если ничего из современного не поддерживает:

body {
    background-image: image-set(
        url('bg.avif') type('image/avif'),
        url('bg.webp') type('image/webp'),
        url('bg.jpg')  type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Порядок важен: браузер берёт первый формат, который умеет. avif даёт самый маленький вес, поэтому идёт первым, JPEG — последним как страховка.

Когда фон — это на самом деле картинка

Если изображение по смыслу контентное — портфолио, фотогалерея, обложка — лучше не прятать его в CSS-фон, а ставить настоящий <img> и растягивать через object-fit. Тогда картинка попадает в индекс поисковика, у неё есть alt, и её можно лениво грузить через loading="lazy":

<img src="bg.jpg" alt="Описание картинки" class="hero-bg" loading="lazy">

.hero-bg {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

object-fit: cover работает для <img> ровно так же, как background-size: cover для фона: заполняет контейнер, обрезая лишнее. inset: 0 — короткая запись для top/right/bottom/left: 0, прибивает картинку ко всем краям.

Чеклист

Фон на весь экран — background: url(...) no-repeat center / cover на body.
Высота — min-height: 100dvh, не 100vh: учитывает адресную строку на мобилках.
Несколько форматов через image-set(): avif → webp → jpg.
Если картинка контентная — <img> + object-fit: cover, а не CSS-фон.
loading="lazy" на <img>, чтобы не блокировать загрузку страницы.