较旧的浏览器支持
如果必须有较旧的浏览器支持，那么您就不能同时使用多个背景或渐变，那么您可能需要对备用
div元素执行以下操作：
#background { position: fixed; top: 0; left: 0; width: 50%; height: 100%; background-color: pink; }该解决方案使用一个额外的固定div来填充屏幕的一半。由于它是固定的，因此即使您的用户滚动，它也将保持在原位。您稍后可能需要弄弄一些z索引，以确保您的其他元素位于背景div上方，但不要太复杂。
如果遇到问题，只需确保其余内容的z索引高于背景元素，就可以了。
现代浏览器
如果仅是较新的浏览器，则可以使用其他两种方法：
线性渐变：
这绝对是最简单的解决方案。您可以在主体的背景属性中使用线性渐变以获得各种效果。
body { height: 100%; background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);}每种颜色都会导致50％的硬截止，因此顾名思义，没有“渐变”。尝试对样式的“50％”部分进行试验，以查看可以实现的不同效果。
具有背景大小的多个背景：
您可以将背景颜色应用于
html元素，然后将背景图像应用于
body元素，并使用
background-size属性将其设置为页面宽度的50％。这会产生类似的效果，尽管实际上只有在使用一两个图像时才在渐变上使用。
html { 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;}额外的注意： 请注意，在后面的示例中，
html和
body元素均设置为
height:100%。这是为了确保即使您的内容小于页面，背景也将至少是用户视口的高度。没有明确的高度，背景效果将仅下降到页面内容。一般来说，这也是一个很好的做法。
