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.
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;
}
If newer browsers are your only concern, you have more options:
<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%);
}
<div class="code" style="position:relative; padding:0px; margin:0px;"><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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
