I'm looking for a something like the following done in css:
http://www.statesconstruction.com/

I know i've seen this several times over, but now that I'm looking, I can't seem to find one that's all done in css.

my guess:
div container to center the content
left div for the left gradient
contentdiv for content
right div for right gradient

then have the background for the left and right repeat-y.


does this make sense? am i on the right track or setting up for bad-news-bears?

the way i did it on my site was to make one background image that's really wide but short vertically. it's over here. (oops, forgot about my anti-hotlinking .htaccess.) it handles body background color, gradient edge. nav column color, content column color, right gradient edge and background color again.

then in the css i appled it to the BODY of the page, centered, starting at the top, and repeating only in the Y axis.

body {
background-image : url(/img/bg-body.gif);
background-position : 50% 0px;
background-repeat : repeat-y;
}

then i put the page content in a div that gets centered over the areas it's supposed to be in, and made the columns fit into the appropriate spaces over the background image areas.

oh and hi, always good to see familiar faces. ;)

Set up one centred wrapper div using margins left & right : auto & set the width you'd like then give it a background image (which is the slice with your gradients etc - only needs to be 1px high if you like) and repeat it in the y-axis.
For example;

div#wrap {margin:0 auto; background:url(images/content_bg.jpg) repeat-y;}

You can even use the same image to create faux columns - http://www.alistapart.com/articles/fauxcolumns/"