How Can I Create a Two-Colored Split Background in CSS?

CSS: Set a Background Color which is 50% of the Window

Trying to achieve a background on a page that is "split in two"; two colors on opposite sides? Fortunately, there are multiple ways to achieve this effect, depending on your browser support requirements.

Older Browser Support

If older browser support is a must, you'll need to use an extra fixed div that fills half the screen and set its background color.

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

Copy after login

}

Modern Browsers

If newer browsers are your only concern, you have more options:

Linear Gradient:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

Copy after login