質問

ページの背景を2つに分割して、2つの色を反対側に配置しようとしています（一見すると、デフォルトの background-color の上に body タグに適用し、さらに div のように、ウィンドウの幅いっぱいに引き伸ばすことができます)。

解決策を思いついたのですが、残念ながら background-size プロパティはIE7/8では動作しません。

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

ソリッドカラーの場合だけなので、もしかしたら通常の background-color プロパティを使用してください。

どのように解決するのですか？

旧ブラウザ対応

古いブラウザへの対応が必須で、複数の背景やグラデーションが使えない場合は、予備でこのようなことをすることになると思います。 div 要素を使用します。

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

例 http://jsfiddle.net/PLfLW/1704/

このソリューションでは、画面の半分を埋める余分な固定divを使用しています。固定されているので、ユーザーがスクロールしてもその位置に留まります。他の要素が背景の div よりも上に来るように、後でいくつかの z-index を調整する必要があるかもしれませんが、それほど複雑ではありません。

問題がある場合は、他のコンテンツのzインデックスが背景要素より高いことを確認すれば、問題ありません。

モダンブラウザ

新しいブラウザーが唯一の関心事である場合、他にもいくつかの方法があります。

直線的なグラデーション。

これは間違いなく最も簡単な解決策です。ボディのbackgroundプロパティでlinear-gradientを使用すると、さまざまな効果を得ることができます。

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

この場合、各色50%でハードカットされるため、その名の通りグラデーションがかかりません。50%でカットすることでどのような効果が得られるか、試してみてください。

例 http://jsfiddle.net/v14m59pq/2/

background-sizeで複数の背景を設定。

に背景色を適用することができます。 html 要素に背景画像を適用し、その後に body 要素を使用し background-size プロパティを使って、ページ幅の50%に設定します。この結果、同様の効果が得られますが、実際には、画像や2つの画像を使用する場合に、グラデーションの上にのみ使用されるでしょう。

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 NOTE。 の両方が html と body 要素に設定されます。 height: 100% を、後者の例では これは、コンテンツがページより小さくても、背景が少なくともユーザーのビューポートの高さになるようにするためです。高さを明示しないと、背景の効果はページのコンテンツと同じ高さまでしか下がらないのです。また、これは一般的に良い習慣です。