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.

<pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

Modern Browsers

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

Linear Gradient:

<pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

Multiple Backgrounds with background-size:

<pre class="brush:php;toolbar:false">height: 100%;
background-color: cyan;

}

body {

height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;

}

Don't forget to set the height to 100% for both the html and body elements to ensure the background covers the entire viewport.

The above is the detailed content of How Can I Create a Two-Colored Split Background in CSS?. For more information, please follow other related articles on the PHP Chinese website!