How to extend a wrapped element background both left and right with different color?

Question

I am trying to Extend a Wrapped Element to the Full Browser Width Using CSS: :before and :after pseudo elements.

This is my HTML:

 <section class="top-banner">
  <div class="flash-banner">  
    <object width="1003" height="121">
      <param name="movie" value="img/banner_header.swf">
      <embed src="img/banner_header.swf" width="1003" height="121">
      </embed>
    </object>
  </div>
</section>

.flash-banner DIV have centered on the page. So I need to fill left and right spaces of this DIV with two colors.

Check this image for clear understand:

This is how I tried it. But Still I couldn't figure this out.

.top-banner {
    text-align: center;
}

.flash-banner {
    background: #2D3447;
    height: 121px;
    position: relative; 
  margin: 0 -30px;
  padding: 0.25rem 30px;
  background: #333;
}

.flash-banner:before, 
.flash-banner:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: green;
}

.flash-banner:after { 
  width: 150%;
  left: 100%;
  background: green;
}

Hope somebody may help me out. Thank you.

Answer 1

I put your code in jsfiddle and add some css rules to get minimal example working.

HTML:

<section class="top-banner">
  <div class="flash-banner">
  </div>
</section>

CSS:

.top-banner {
    text-align: center;
    width: 100%;
    overflow: hidden;
}

.flash-banner {
    background: #2D3447;
    height: 121px;
    width: 50px;
    position: relative; 
  margin: 0 auto;
  padding: 0.25rem 30px;
  background: #333;
}

.flash-banner:before, 
.flash-banner:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9600px;
  right: 100%;
  background: red;
}

.flash-banner:after { 
  width: 9600px;
  left: 100%;
  background: green;
}

Check: https://jsfiddle.net/lmgonzalves/vwty760m/

Answer 2

I have adjusted your :before and :after so they run behind the flash banner and fill it 100%.

All you need to do is change the size of the .flash-banner .

 .top-banner { text-align: center; width: 100%; position: relative; } .flash-banner { height: 121px; width: 300px; background: blue; margin: auto; z-index: 1; } .flash-banner:before, .flash-banner:after { content: ""; position: absolute; width: 50%; height: 100%; left: 0; background: red; z-index: -1; } .flash-banner:after { background: green; right: 0; left: auto; } 

  <section class="top-banner"> <div class="flash-banner"> </div> </section> 

Answer 3

Try this

.flash-banner:before, 
.flash-banner:after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  z-index:-1;
  position: absolute;
  top: 0;
  right: 0;
  background: green;
}

.flash-banner:after { 
  left: 0;
  background: red;
}