Как верстаются такие фоновые изображения для широкоформата?

Верстка фоновых изображений для широкоформата происходит с использованием CSS. Есть несколько способов создания фоновых изображений для широкоформатных экранов, и я рассмотрю наиболее популярные из них.

Использование фонового изображения с фиксированной шириной:

Укажите фоновое изображение для элемента с помощью свойства background-image.
Задайте ширину изображения с помощью свойства background-size, например background-size: 1920px.
Чтобы изображение занимало весь доступный экран, задайте свойство background-repeat: no-repeat и background-position: center center, чтобы изображение было выровнено по центру.

   .wide-image {
       background-image: url('path/to/image.jpg');
       background-size: 1920px;
       background-repeat: no-repeat;
       background-position: center center;
   }

Использование фонового изображения с относительной шириной:

Укажите фоновое изображение для элемента с помощью свойства background-image.
Задайте ширину изображения в процентах с помощью свойства background-size, например background-size: 100%.
Чтобы изображение занимало весь доступный экран, также задайте свойство background-repeat: no-repeat и background-position: center center.

   .wide-image {
       background-image: url('path/to/image.jpg');
       background-size: 100%;
       background-repeat: no-repeat;
       background-position: center center;
   }

Использование фонового изображения с адаптивной шириной:

Создайте элемент-обертку, например <div class="wrapper">, и задайте ему свойство position: relative.
Внутри этого элемента создайте еще один элемент с классом <div class="wide-image">, который будет являться фоном с адаптивной шириной.
Установите для этого элемента свойства width: 100% и padding-bottom с помощью псевдоэлемента (::before), чтобы сохранить соотношение сторон при изменении размеров окна.
Установите фоновое изображение для этого элемента, используя свойство background-image, и настройте другие свойства, такие как background-size, background-repeat и background-position.

   .wrapper {
       position: relative;
   }
   
   .wide-image::before {
       content: "";
       display: block;
       padding-bottom: 56.25%; /* соотношение сторон 16:9 */
   }
   
   .wide-image {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       background-image: url('path/to/image.jpg');
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center center;
   }

Выбор метода верстки фоновых изображений для широкоформатных экранов зависит от требуемого результата и особенностей проекта. Первый метод может быть наиболее подходящим для фиксированной ширины, второй метод хорошо подходит для резиновых макетов, а третий метод предлагает адаптивность и сохранение соотношения сторон при изменении размеров экрана.