A CSS background with three colors repeated on x axis?

Basically I want to imitate the repeat-x trick where you take a 1-pixel strip image and repeat it on the x axis, but using CSS, instead of an image. My header is a grey background, the middle is blue (main cont开发者_运维百科ent) and the footer is grey. Would there be a way to have it generated in CSS (grey certain pixels high, blue, grey..) AND (tall order if possible) have it be relative to the size of the browser?

Here is a solution for CSS3 Browsers (and IE9 too) using CSS3Pie: http://css3pie.com/demos/gradient-patterns/

For IE6-8, I don't believe you can do something without images.