Joe Joe - 3 months ago 18
CSS Question

Split colour background (CSS & HTML)

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

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>