Solution 1 :


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

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

Problem :

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>
.container {
 max-width: 1200px;
 margin: 0 auto;

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


Comment posted by Shadi Farzankia

set the height of the div to 100%. I think the problem is that div doesn’t have any height

Comment posted by dmking0728

I forgot to mention but that container has a height set already.