Создание полной ширины фонового изображения внутри контейнера

Question

У меня есть контейнер, который установлен на 1200px. Внутри этого контейнера у меня есть div с фоновым изображением, установленным через css. Мне нужно сделать так, чтобы это фоновое изображение «экранировало» свой контейнер полной ширины, в которое оно было захвачено, и сделало так, чтобы оно охватывало всю ширину страницы. Как бы я совершил sh это?

<div class="container">
  <div class="hero">
    <p>irrelevant stuff inside</p>
  </div>
</div>

.container {
 max-width: 1200px;
 margin: 0 auto;
}

.hero {
 background: url("https:example.com") center center no-repeat;
 background-size: cover;
 width: 100%;
}

Answer 1

CSS

.hero {
  position: absolute;
  left: 0;
  background: url('img.jpg');
  width: 100%;
}

Примечание: .контейнер элемент должен иметь 'положение: stati c «. Любое другое значение не будет работать.