CSS for Layout

by Joe Gillespie — Sep 1, 2002

One of the things that you can't do with a tables-based layout is put text or images on top of other images, so the first thing I wanted to explore was the layering of graphic images to get a 'look' to a page that you just can't get with conventional HTML. Normally you can use a repeating pattern as a background for a Web page. This page, for instance, is a good example of a tiny GIF file that is stepped and repeated to fill the entire page with negligible file size overhead.

Sometimes you see Web page backgrounds that are huge GIF or JPEG files that take ages to download and don't show up for several seconds after the rest of the page has been rendered. Also, any background image will repeat eventually. If you want to fill the entire browser area with one background image, you have to make it so big that it will not tile on the largest monitor.

layers

A repeating GIF on top of a small JPEG makes a page background more interesting but you can only do it with CSS

With CSS, you can set an image to fill 100% width and height of its containing box or you can use several tiling methods to govern how it repeats - no-repeat, repeat-x, repeat-y etc. If you set a regular image to 100% x 100% of the browser window size, it will probably look awful. Web images don't generally scale well and look bad at anything other then their natural size. For a JPEG image to look decent at full screen size would require an unrealistic file size. What I did was produce a small JPEG using high compression, which was just tonal in nature - a simple gradient or shaft of light effect. On top of that, I have a repeating GIF file with transparent holes in it allowing the tone of the JPEG to show through. As the repeating GIF is crisp and sharp, it completely disguises the low quality of the JPEG behind but gives an overall impression of a high quality background image that is NOT simply a repeating pattern and resizes perfectly with the browser window, regardless of the size.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float