Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как сверху добавить и сделать по центру блок 1200px?

Чтобы создать блок во всю ширину сайта с картинкой, занимающей 50% ширины, а оставшуюся половину занимал черный фон, а также чтобы этот блок был расположен по центру и имел ширину 1200px, вам понадобится использовать свойства CSS, такие как width, background, и margin.

Начнем с создания основного контейнера, который будет занимать всю ширину сайта:

.container {
  width: 100%;
}

Затем добавим внутренний блок для размещения картинки и черного фона:

.content {
  width: 1200px;
  margin: 0 auto;
}

Далее установим ширину картинки на 50% и добавим черный фон к остальной половине:

.image {
  width: 50%;
  float: left; /* чтобы картинка и фон были рядом */
  background-color: black;
}

.background {
  width: 50%;
  float: left;
  background-color: black;
}

Теперь, чтобы добавить изображение наверху и сделать блок по центру, добавим немного дополнительных стилей:

.image img {
  display: block;
  margin: 0 auto; /* чтобы изображение было по центру */
  max-width: 100%;
  height: auto; /* чтобы сохранить пропорции изображения */
}

.background {
  padding-top: 50%; /* создает место для изображения наверху блока */
  background-color: black;
}

<div class="container">
  <div class="content">
    <div class="image">
      <img src="path/to/image.jpg" alt="Image">
    </div>
    <div class="background"></div>
  </div>
</div>

Таким образом, вы создадите блок во всю ширину сайта, где 50% займет изображение, а другие 50% — черный фон. Вы также добавите изображение наверху блока и сделаете блок по центру и с шириной 1200px.