50-50 split background with a centered layer covering on top - html

Question

I am trying to do the following:
- add a left background, 50% width (color red).
- add a right background, 50% width (color green).
- add a centered layer for content (had to wrap it with another layer).
(wrapper blue, content white).
I'll change the backgrounds later, but I need a 50-50 split background with a different background image on each side and with a centered layer covering on top of that.
Any improvments or suggestions? :)
Code below:
/* By forcing `height: 100%` in the html
and body tag will make sure there are no white areas
in vicinity (this is optional though, use it only if you need it */
html, body {height: 100%;}
/* -------------------------------------------- */
div
{
border: 1px solid black;
}
div#wd_bg_left
{
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
background-color: red;
z-index: 1;
}
div#wd_bg_right
{
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50%;
background-color: green;
z-index: 1;
}
div#wd_wrapper_1
{
position: absolute;
top: 0;
bottom: 0;
left: 5%;
right: 5%;
background-color: blue;
z-index: 2;
}
div#wd_wrapper_2
{
margin: 5px auto 5px auto;
min-height: 99%;
background-color: white;
width: 1000px;
}
<div id="wd_bg_left"></div>
<div id="wd_bg_right"></div>
<div id="wd_wrapper_1">
<div id="wd_wrapper_2"></div>
</div>

Answer 1

A simple linear gradient would suffice if color is all you need.
html, body {
height:100%;
margin:0;
}
body {
min-height:100%;
background:linear-gradient(to right, red, red 50%, blue 50%);
}
.container {
height:100%;
width:50%; /* your width here */
margin:auto;
border:1px solid green;
}
<div class="container"></div>
Or a couple of pseudo-elements if you want background images
html,
body {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 50%;
/* your width here */
margin: auto;
border: 1px solid green;
position: relative;
}
.container::before,
.container::after {
content: '';
position: absolute;
top: 0;
height: 100%;
width: 50vw;
z-index: -1;
}
.container::before {
/* rightside */
background: #f00; /* use bg image here */
left: 50%;
}
.container::after {
/* leftside */
background: #0f0; /* use bg image here */
right: 50%;
}
<div class="container"></div>

Answer 2

Try this:
#wd-bg-right {
width:50vw;
Height: 100vh; /* just for demonstrating*/
Background-color: red;
Right: 0;
}
wd
-bg-right {
width:50vw;
Height: 100vh; /* just for demonstrating*/
Background-color: red;
Right: 0;
}
Hope it helps you, cheers!