Split colour background (CSS & HTML)

Question

Is there a way for me to have a split colour background, so I have left half of the page black, right half white.

Usually I will have the <header> and <footer> which will be full width at top and bottom of the page and inside, a wrapper, to centre the content of those elements so the content isn't full width of the entire body .

Now when it comes to the actual content where posts and side navigation etc could be, I want one side to be white and one side to be light grey.

I know I can create two columns inside a centred wrapper floated left with different background colours, but that would still leave the background colour showing on either side of the wrapper .

I hope someone understands what I'm talking about, I have no idea how to explain it or what to search.

I will make a quick picture in paint and attach to this post soon,

many thanks!

Edit: Example picture

Answer 1

This is what you can do:

HTML

<div id="content"></div>
<div id="background"></div>

CSS

#background {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 50%;
    height: 100%;
    background-color: pink;
    z-index: 1;
}

#content {
    position: relative;
    z-index: 2;
}

Answer 2

You may try this

 header, footer{ background-color: #ff3399; position: relative; text-align: center; padding: 5px; } .container{ position: relative; overflow: hidden; } .bg{ position: absolute; top: 0; bottom:0; height: 3000px; } .bgwhite{ background-color: white; width: 50%; left: 0; } .bggray{ background-color: lightgray; width: 50%; right: 0; } .wrapper{ position: relative; width: 80%; margin: auto; } p{ margin: 0; padding: 10px; } 

 <header>This is header</header> <div class="container"> <div class="bg bgwhite"></div> <div class="bg bggray"></div> <div class="wrapper"> <p>This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content. This is website content.</p> </div> <footer>This is footer</footer>