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.
See Question&Answers more detail:os