The full potential of background tiles in web page design is seldom utilized! They can be a powerful way of enhancing your web page with more creative layouts while still maintaining cross-platform compatibility. Here is one of my favorite design tricks using a background tile. I used this method to build the index.htm page of this website. The page comprises two key elements.

1. The first is a 780 pixel wide table with cells that contain all text and three small graphics. The image below shows how the page would look with no background image and the table borders visible.

2. The second is a background tile that is also 780 pixels wide. Key design elements including the logo and main graphic elements are placed on the background tile shown below.

The tile is controlled by a (css) style sheet that makes the background a non-repeating tile, left aligned on the page. The code is placed in the header of the html page. Click here for a css background code tutorial.

The end result is what you see at below. If you design the page in Photoshop or any other program that allows exact positioning of elements on layers it will be very easy create precise layouts that are converted to html tables. Using a style sheet is the only way to position the background image without it tiling. The style sheet code is compatible with IExplorer and Netscape browsers version 4 and up.