Home
FrontPage Hosting
mySQL Hosting
Dedicated Servers
Managed Services
Domain Parking

Search our FrontPage Support Area
FrontPage Support Area Site Map

FrontPage Background Image Tile Trick

Prodigy, IE2 and Netscape 2+3 (I don't have NS 4 yet) don't support a background image for a table cell. So it would seem impossible to tile an image in a cell for display in one of these browsers. But wait...

I make extensive use of a trick I discovered, on my website (http://www.max-soft.com/). You will notice that the top drop-shadow and the blue dividers will resize themselves automatically when the browser window is resized. It appears the image is being tiled but it is not. The images are actually only 8x8 pixels in size!

My trick will only work with horizontally flat images (images that have no changes in the pixel pattern from the left side to the right side of the image).

The image for the drop-shadow and the blue divider are only 8x8 pixels in size. I am stretching the image horizontally to fill the entire cell no matter how wide it gets. This can be done by doing the below steps in the order given:

1. Create a table/cell and set its width to 100%.
2. Set the cell height to the height of the below image.
3. Insert a horizontally-flat image into the cell.
4. Right-click on the image to select it.
5. Select "Image Properties" from the pop-up menu.
6. Click on the "Appearance" tab.
7. Check "Specify Size".
8. Click the "Percent" radio button for the "Width" (this will gray out the "keep aspect ratio").
9. Set the width percentage to 100% (leave the height alone).
10. Click OK to close the pop-up dialog.

The image will now stretch to the full width of the cell that it is in. If the image is a true horizontally-flat image there should be no distortion in the image from the left to the right side no matter how wide or thin the browser window it set to. It will appear that the image was created to be the full width of the cell and not the actual size of just 8 pixels wide.

The reason my trick requires a horizontally-flat image is that when it is stretch, distortion would be introduced to the image if the image didn't contain the same pixel pattern going from left to right. This happens because the browser will try to mathematically resize the image to fit the bigger width, and usually the "filler" pixels it adds will make the image look noisy. Its OK for the image to have a different pixel pattern from top to bottom because my example doesn't stretch the image vertically.

Quirks:

1) the Prodigy browser wont even show an image if its resized at all. But it does support a background color for a cell. So to allow prodigy visitors to see a decent divider, I set the background color of the cell to a color that will look descent when viewed in prodigy. Since prodigy's browser wont show the stretched image at all, all the visitor will see is the cell color as a divider. This is why its important to set the cell height to the image height, so when a browser that can show stretch images is being used, only the image will be seen by the visitor, not the background color behind the image.

2) Netscape 2+3 (I do not have 4.0 yet). Will not stretch the image properly unless the image is given the "right justify" attribute by clicking on the right justify button toolbar in FrontPage. This results in the image being slightly offset to the right.

Hope you like.

- John Cody