I'm working on my first Montezuma Site (have over 40 Atahualpa ones) and I'd like to be able to have two colors in the background behind the site split down the middle.

Say Blue on left, Red on right.

So when someone squeezes it the center moves and blue stays left red right.

Is there any way to do this with CSS?

Use a single wide image (only a pixel or two in height) with both colors in it, centered horizontally and repeating vertically. Also, try using the shorthand background property:

background: #000 url(../images/BG.gif) top center repeat-y;

How about a red and blue background image that is 1px high by 2500px wide that you center align and repeat vertically?

Addendum...
Just a minute later than JD but it corroborates the idea.

Thanks, I'll get to this later tomorrow and report back.

You could also do something similar to your example images with nested percentage grids and, instead of using background images, just use background colors for each div, such as:

background:red;

You could also stack some div's using z-index.