CSS Set a background color which is 50 of the width of the window

Question

Attempting to create a "split-in-two" background with two colors on either side of the page (seemingly done by setting a default background color on the body tag, then applying another onto a div that stretches the entire width of the window).

Unfortunately, despite my best efforts, the background-size attribute is inoperable in IE7 and IE8, which is essential for this project-

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

Since it's just about solid colors maybe there is a way using only the regular background-color property?

Answer 1

You can make a hard distinction instead of a linear gradient by putting the second color at 0%

For Example,

Gradient - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Hard distinction - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);