我没有想出一个解决方案，但不幸的是background-size属性不工作在IE7 / 8这是一个必须为这个项目 –
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
因为它只是关于纯色可能有一种方式使用只有常规的背景颜色属性？
解决方法
如果旧的浏览器支持是必须的，所以你不能去使用多个背景或渐变，你可能要在备用的div元素上做这样的事情：
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
示例：http://jsfiddle.net/PLfLW/1704/
解决方案使用一个额外的固定div填充屏幕的一半。由于它是固定的，它将保持在位，即使当您的用户滚动。你可能需要稍后解开一些z-index，以确保你的其他元素在背景div之上，但它不应该太复杂。
如果你有问题，只要确保你的内容的其余部分的z-index高于background元素，你应该很好去。
现代浏览器
如果您只关心新的浏览器，还有其他几种方法可供您使用：
线性渐变：
这绝对是最简单的解决方案。你可以在身体的背景属性中使用线性渐变的各种效果。
body {
height: 100%;
background: linear-gradient(90deg,#FFC0CB 50%,#00FFFF 50%);
}
这导致对于每种颜色的50％的硬截止，因此没有顾名思义的“渐变”。尝试尝试使用“50％”样式的风格，以查看您可以实现的不同效果。
示例：http://jsfiddle.net/v14m59pq/2/
与背景大小的多背景：
您可以将背景颜色应用于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;
}
示例：http://jsfiddle.net/6vhshyxg/2/
EXTRA注意：请注意，在后面的示例中，html和body元素都设置为height：100％。这是为了确保即使您的内容小于页面，背景将至少是用户的视口的高度。没有显式的高度，背景效果只会下降到你的页面内容。这也只是一个好的做法。
