Full blled background onto two side-by-side Boxes - css

Question

I'd need to have two side-by-side Boxes, with background that is extended to full page width, but text content should be contained inside main container that is limited a specific size.
I tried the following HTML code:
<div class="wrapper">
<div class="container">
<section class="left">LEFT</section>
<section class="right">RIGHT</section>
</div>
</div>
and here the sCSS:
.wrapper {
background: lightgray;
padding-block: 10px;
overflow: hidden;
}
.container {
border: dotted 1px red;
display: flex;
max-width: 900px;
margin-inline: auto;
section {
padding-block: 100px;
border: solid 1px blue;
flex: 1;
position: relative;
isolation: isolate;
&.left {
background: green;
&:before {
content:"";
display: block;
background: green;
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 500%;
z-index: -1;
}
}
&.right {
background: orange;
&:before {
content:"";
display: block;
background: orange;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 500%;
z-index: -1;
}
}
}
}
Here a working example. Have you any suggestion to have a better solution with almost the same result?

Answer 1

You could add an extra div inside your wrapper and use a linear gradient on it:
.wrapper {
background: lightgray;
padding-block: 10px;
overflow: hidden;
}
.background {
background: linear-gradient(to right, green, green 50%, orange 50%, orange 100%);
}
.container {
border: dotted 1px red;
display: flex;
max-width: 900px;
margin-inline: auto;
}
.column {
width: 50%;
}
<div class="wrapper">
<div class="background">
<div class="container">
<section class="column left">LEFT</section>
<section class="column right">RIGHT</section>
</div>
</div>
</div>