在设置的容器内制作全宽背景图像

Question

I have a container that is set at 1200px. Inside that container i have div that has a background image set via css. I need to make this background image "escape" its full width container that it is trapped in and make it span the entire width of the page. How would i accomplish this?

<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%;
}

Note: .container element should have 'position:static' . Any other value will not work.