CSS/HTML DIV needs to go across the screen in set position

Question

I need a div filled with colour that goes across the screen behind the bottles like this:

Have tried too many times now...

Here is my html:

  .panel {
  height: 100vh;
  width: 100vw;
  display: block;
}

.OriginalCollection {
  background: url(img/page_5_background.png);
}

.inner2 {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.centerwraper {
  position: relative;
  height: auto;
  margin: 0 auto;
  padding: 10px;
}

.centerdivcollections {
  margin: 0 auto;
  text-align: center;
  max-width: 1080px;
}

.allbottleswrap {
  display: flex;
}

.singlebottle {
  width: 100%;
}

@media (max-width: 1200px) {
  .singlebottle {
    width: 100%;
  }
}

.bottletextwraper {
  display: inline-block;
  vertical-align: middle;
}

.bottletext {
  padding: 0px 5px 0px 0px;
}

.titlebottle {
  width: 90%;
  .stripeee {
    background-color: #662d91;
    width: 100vw;
    height: 30px;
    position: absolute;
    left: 0;
    right: 0;
    margin-top: -45px;
  }

<section class="panel OriginalCollection" data-section-name="OriginalCollection">
  <div class="inner2">
    <div class="centerwraper">
      <div class="centerdivcollections">
        <div>
          <img class="coltitle" src="img/original_header.png" />
        </div>
        <div class="allbottleswrap">
          <div class="bottletextwraper">
            <div>
              <img class="singlebottle" src="img/1Heisenberg.png" />
            </div>
            <div>
              <img class="titlebottle" src="Titles/Titles/Heisenberg.png" />
            </div>
            <div class="bottletext">
              <p>A top secret recipe that can only be described as the daddy of all day vapes. A fruity undertone and a cool crystal after sensation that will leave you wondering what it is... and wanting more.</p>
            </div>
          </div>
          <div class="bottletextwraper">
            <div>
              <img class="singlebottle" src="img/2Pinkman.png" />
            </div>
            <div>
              <img class="titlebottle" src="Titles/Titles/Pinkman.png" />
            </div>
            <div class="bottletext">
              <p>The real MVP of the fruity flavours. Perfect for those looking for a one of a kind taste sensation. A true mouth-watering fruit explosion that your taste buds have been waiting for.</p>
            </div>
          </div>
          <div class="bottletextwraper">
            <div>
              <img class="singlebottle" src="img/3BloodSukka.png" />
            </div>
            <div>
              <img class="titlebottle" src="Titles/Titles/BloodSukka.png" />
            </div>
            <div class="bottletext">
              <p>Packed with one hell of a bite. This flavour is crammed with sweet red cherries blended perfectly with fresh picked forest fruits. The fruity taste is then entangled beautifully with sweet eucalyptus and aniseed.</p>
            </div>
          </div>
        </div>
        <div class="stripeee">
          <br>
        </div>
      </div>
    </div>
  </div>
</section>

Everything is almost done as I want, except this stripe... If you want you can always go to www.konceptxix.com to see the actual site. It's probably an easy fix for someone who knows it well. Sorry for mess in the code, I'm doing my best...

UPDATE: I can get this set to a position behind it, but it has to be responsive so it's the same on mobile etc...

Answer 1

I'm assuming you want this to go all the way across the page? You'll want to use a pseudo element instead of a div, since it's just a decoration, and you can set the width to something impossibly wide to guarantee it fills the page - you already have overflow set to hidden on the sections, so it won't matter if it gets too wide. I used 150vw and set the left to -50vw, to guarantee that it's always at the far-left of the screen and goes all the way across.

From there, I needed to find a way to target the container for the images, that way I could position the pseudo element consistently as the image gets scaled down without worrying about overlapping the text. So I target the first bottle's first div, which is always the image, that way using different sized images doesn't cause weird double dividers. The result should be what you're looking for!

.bottletextwraper div:first-of-type{
 position: relative;
}
.bottletextwraper img{
 position: relative;
 z-index: 1;
}
.bottletextwraper:first-child div:first-of-type:after{
 content: '';
 display: block;
 width: 150vw;
 position: absolute;
 bottom: 3%;
 left: -50vw;
 height: 15%;
 background: #662d91;
}

Answer 2

Because the stripee is outside of allbottletexwrapper its harder to correctly set the z-indexing. If you can move it inside, you can do without z-index hacks. But anyway, here is what you can do:

 //set stripee to be relative and positioned (use your size units)
.stripeee {
 position: relative;
 top: -190px;
 z-index: 1;/*mind this... a bit hacky but... */
 }

And then style the bottles:

 .bottletextwraper {
   z-index: 5; /* use whatever number you consider safe according to the rest of page*/
 }

Answer 3

.bottletextwraper {
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.bottletextwraper::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background-color: orange;
}

Try to add this.