Single emcompassing Overflow DIV with an in image

Question

I'm trying to make my image full screen while overflowing the div

pulled from here: CSS - how to overflow from div to full width of screen

Except instead of using a color, I'm using an image..but I want it to be full screen also. Any ideas?

.main-header:after {
  content: "";
  position: absolute;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 99vw;
  background-size: cover;
  background: url(header_bg.jpg) no-repeat center center; /* help */
  z-index: -1;
}

Answer 1

Like this?

body{
  margin:auto;
}

#for_real,#top{
  width:100px;
  height:100px;
  border:solid;
  z-index:100;
}
#for_real img{
  position:fixed;
  top:0px;
  left:0px;
  opacity:0.5;
  
  width:100vw ;
  height:100vh;
}

<div id='top'>
TOP DIV WITH NO IMAGE
</div>

<div id='for_real'>
DIV WITH IMAGE
<img src='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT-gpy8G_VpoocZD5L5tuNO_hO_BC9zXl32WCjaHcE-ICiWhL5O'>

</div>