How to create the illusion of a 100% width div that is actually fixed width (with bg color) [duplica-CodePudding

My body's bg color is white and I have this div:

<div style="max-width:1140px;margin:0 auto;background-color:rgba(0,0,0,.50)">
    Lorum ipsum example
</div>

The div is horizontally centered and has a bg color black w/50% transparency.

I want to simulate the black bg color w/50% transparency to the left and the right of the div for visitors with screen resolutions larger than 1140w without wrapping it in a container div, if that's even possible. I think it might not be possible.

I thought about borders, but you can't set border widths in percentages.

Edit: Here is a fiddle which should paint a clear picture of what I'm after

CodePudding user response：

You can also use ::after or ::before to achieve the same as needed

This is for demo only you can change styles according to need

.orignDiv {
  max-width: 1140px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .50)
}

.orignDiv::after {
  content: "";
  width: 100%;
  height: 18px;
  position: absolute;
  left: 0;
  background-color: red;
  z-index: -1;
}

<div class="orignDiv">
  Lorum ipsum example
</div>

Also you can achieve by extra div which is not wrapped around the main div

.orignDiv {
  max-width: 1140px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, .50)
}

.withoutWrap {
  position: relative;
  background-color: rgba(20, 0, 0, .50);
  width: 100%;
  height: 18px;
  top: -20px
}

<div class="orignDiv">
  Lorum ipsum example
</div>
<div class="withoutWrap"></div>