Three column layout: fixed width center with fluid side columns

Question

I'm trying to implement a design in CSS that will have a tiled background on the body. I want to use a png image in the content background as an oval-shaped opacity mask over the body background. The side columns (and a propped footer with clipped overflow) will have a partially opaque black background that will match the edges of the .png mask.

The intention is to have a fixed dimension center area with a complex background pattern that will fill any size browser window.

I can't think how I would pull this off. margin:auto does not seem like it will be sufficient for my background requirement and I don't think I can add a large fixed prop to the side-columns without losing my centering.

Here's a rough mockup of the layout.

Answer 1

As per your screenshot you can write like this:

body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

UPDATED:

Solution according to your question Three column layout: fixed width center with fluid side columns

http://jsfiddle.net/XMg2h/3/

But it's work in modern browsers

UPDATED

http://jsfiddle.net/XMg2h/10/

it's work in all browsers

Answer 2

I've worked a solution using absolute positioning. I appreciate any comments.

http://jsfiddle.net/tupCS/12/

I tried working with floats and negative margins, but the backgrounds overlapped, which would not work since I am needing this for background masks and the overlap would cause bleeding between the masks.

My solution also separates the background columns into their own div. I can then hide overflow for this div while not hiding it for the content. This allows scroll bars to appear only when the window is smaller than the content.