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

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>

Welcome to StackOverflow! We cannot reproduce this because you have a reset.css file that we don't know what's in. Can you try creating a jsfiddle.net and then linking that? That way we can see exactly the output you are seeing. — Tennyson H, Feb 09 '16 at 20:09
If you go with making a JSFiddle, don't forget that you still need enough code to reproduce your issue **in the question itself**. A link to a 3rd party site is not sufficient. — BSMP, Feb 09 '16 at 20:11
Possible duplicate of [Can I have multiple background images using CSS?](http://stackoverflow.com/questions/423172/can-i-have-multiple-background-images-using-css) — BSMP, Feb 09 '16 at 20:20

Paulie_D · Answer 1 · 2016-02-09T20:26:16.577

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>

score 0 · Answer 2 · answered Feb 09 '16 at 20:18

0

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!

answered Feb 09 '16 at 20:18

Sarhad Salam

428
3
12

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

2 Answers2

wd