How to create a three-column website background us

问题:

I want to create a website with a sort of three-column background, where the central column has the actual content, and the sides are for decoration.

It seems to be a relatively popular design (I see it often on blogs, but its on many websites). Most Tumblr blogs are good examples, they have the content in the middle, and they have colors on the sides. The size of the content doesn't change as you resize the window, but the sides do.

I'd like to do something similar, except have the sides consist of images, using CSS. I want a website with effectively three columns: one in the middle (of fixed width) consisting of a certain background image to hold the content (the background image must tile to cover the entire column, which is acceptable, the image is designed in that manner), and two columns on either side of the middle content column (also consisting of tiled images in the background). The two side columns must be resizeable, and the image must tile as the page expands, without changing the size of the middle content column. The issue is, I don't have much of an idea how to tackle this problem (there's plenty of guides on how to create three column layouts, but none covering the sort of three column background with tiled images). How would I create such a website?

回答1:

Try using this as a starting point: http://www.noupe.com/css/9-timeless-3-column-layout-techniques.html

回答2:

If both side columns use the same tiled background then I think you can do this with background position.

Set a tiled background on the body with an origin of the top centre of the page.

Create a fixed width centred div as your content column. Set a tiled background on the div too.

As you widen the window the tiling will increase on both sides but because your tiling and div are both centred then they will continue to line up nicely.

回答3:

This site doesn't use HTML5, but it's a great initial resource for all kinds of layouts: Layout Gala (The upside is that the HTML stays the same, and just the CSS changes. The downside is that aside from the layout-skeleton, you have to provide your own CSS. But it's easy enough to convert these layouts to using HTML5 by using the header, footer, and section tags where appropriate.)