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

Trying to achieve a background on a page that is “split in two”; two colors on opposite sides (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).

I did come up with a solution but unfortunately the background-size property doesn’t work in IE7/8 which is a must 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?

14 Answers
14

Leave a Comment