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

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

1. Использование CSS background-size:
Один из самых простых способов верстки фоновых изображений для широкоформатных экранов - это использование свойства CSS background-size. Например, если вы хотите, чтобы изображение растягивалось на всю ширину экрана, вы можете использовать следующий CSS код:

.background {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

2. Использование медиа-запросов:
Для более точной настройки фонового изображения для разных разрешений экранов можно использовать медиа-запросы. Например, если вы хотите, чтобы изображение менялось при достижении определенной ширины экрана, вы можете использовать следующий CSS код:

@media screen and (min-width: 1200px) {
  .background {
    background-image: url('your-large-image.jpg');
  }
}
 
@media screen and (max-width: 1199px) {
  .background {
    background-image: url('your-small-image.jpg');
  }
}

3. Использование тега с позиционированием:
Если у вас есть специфические требования к фоновому изображению (например, необходимость его позиционирования относительно других элементов), вы можете использовать тег внутри контейнера и настроить его позиционирование с помощью CSS:

<div class="background">
  <img src="your-image.jpg" alt="Background Image">
</div>

.background {
  position: relative;
  width: 100%;
  height: 100vh;
}
 
.background img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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