How to use images as backgound GIFs for WEB pages

Background elements can be used with the Netscape 1.1 browser. This element is an extension to "standard" HTML. The Background element uses an image and "tiles" it over the entire page.

Background GIFs make your WEB pages look really neat! Like any other graphic element, they should not take away focus from the text and foreground images being displayed. Here is a way of making a background GIFs from video images captured with the Win/TV and edited and converted with LViewPro:

Configure the Win/TV for high quality video image. Set any Win/TV board for MaxResSave: Click on Configure/SavedImage, then Maximum and BestSave.

Freeze your video image (an image with a light background works best). Use the camera icon to stop the video image. Then save it to the disk by clicking on File/SaveAs. Choose the grey scale GIF format if you want the image to be black and white for the smallest image size. Grey scale GIFs are normally best for WEB backgrounds, but you can also try the 256-color GIF format.

Prepare your image for WEB display with LViewPro. LView Pro has most of the tools for WEB viewing to prepare your image from your high quality images that are captured from the Win/TV. With LView Pro you can crop and adjust the contrast and briteness of the image, and also convert your image into a transparent GIF file. Click here for information on getting the shareware LViewPro.

Open the picture in LViewPro by clicking on File/Open. You should see your color image.

The following steps are done in LviewPro to prepare your image for use as a background:

1. Prepare the image for displaying in the WEB page. First knock down the contrast so that the image does not look overwhelming. A light grey background with low contrast still will allow the text to show up well on top of your background. The key is to make the background image give a feeling but not to be the main focus of your page. Click on Retouch/ContrastEnhance and change the contrast setting to -15 (experiment with this setting). If your image has a darker background, you might need to set the briteness up a bit: click on Retouch/YCrCb and set the Y value (which is known by videographers as the luminance or black/white information) to +25. Remember, most times you want the image to fade into the background so don't be too concerned if the resultant picture looks washed out.

2. This is a good time to crop your picture. Use the cursor to create a crop box, then click on Edit/Crop.

3. Cut the image down to a good size for WEB pages. Since an VGA screen aspect ratio is 640x480, I cut the image to 320 pixels wide: click on Edit/Resize and set New Size width to 320. Let the height set itself automatically (the default is "Preserve Aspect ratio" which will do this).

4. Now we need to create a color palette for the image. Video images captured at 24-bits per pixel contain up to 16 million colors. Most PC's run their VGA displays with 16, 256 or 64,000 colors. So to represent your video image, there needs to be a map between the colors in your video image and the VGA display mode your PC is running in. This map is called a "color palette".

Color palettes also have another benefit to Internet WEB page authors: they cut down the image size (in bytes), therefore making the images load faster.

A typical GIF image color palette has up to 256 entries, each entry being a "true color" 24-bit color. The first 16 entries are normally reserved for the colors of your Windows screen. The other 240 entries in the palette contain the most often used colors in the your video image. This means that many colors in the original video image will not appear when displaying a GIF image. This is a trade-off that is made to cut down on the image size. But GIF images look pretty good, so lets see how we can make a palette that makes your image look the best:

Open up the Palette menu so we can see some of the options available. Click on Retouch/ColorDepth.

There are two types of grey scale images you can create for the background: a dithered image which only uses the colors black and white, and an image that uses black, white plus several shades of grey. The dithered image will be smaller and can actually have a very interesting look, while the image with shades of grey looks more natural but will have a bigger file size and therefore will take longer to load. Which one you choose depends upon the look and feel of your WEB page.

If you want a dithered black and white image, set the palette menu for PaletteImage and Black/White and also enable dithering. Your image will be converted to a dual tone image, which will only use black and white in the color palette, also cutting down on the size of your background GIF. And a dithered black and white image will leave lots of entries for color images which are loaded on top of your background.

If you would like your background to have a richer set of greys, you can still leave space in the color palette for other images. Instead of choosing Black/White, choose Custom and set the number of colors to 32. This will give your image 16 different shades of grey, and should give enough range for your background image and still allow other color images to be placed on top of your background. The image size will be 3x larger than the size with dithered black and white. But the picture might look nicer. Try it and see!

If you want your background image to be color, you can use the same technique as as in making a grey scale image. Simply start with a color GIF instead of grey scale. Color backgrounds, if they are not too imposing, can add spice to your WEB pages.

5. If you want to create a "transparent GIF" so that the image "pops out" from the WEB page, the following needs to be done:

Select Options/BackgroundColor. Immediately click on Dropper and you will see your image once again. Then move the dropper to the color you would like to "melt" into the background of your WEB page. This is the color that will be made transparent throughout your image and show the grey background of the WEB page. Look for a common color at the edge of your image since this will make your image fade into the WEB page. If you have a dithered black/white image, normally choose black as the background since all the black pixels will be replaced with the grey background. But since choosing either black or white will have a dramatic difference on how the WEB page will look, try both. You can see which parts of your image will fade into the background by reopening the BackGround color selection (click on Options/BackGroundColor).

6. This should properly prepare your image for WEB displaying as a background. Now lets save the image to disk.

Turn off the interlace GIF feature by clicking on Options and making sure SaveGIFsInterlaced is NOT checked. Interlaced GIFs are not used for backgrounds.

Click on: File/SaveAs. SaveFileAsType should be set to "GIF89a" to create a transparent background image or "GIF87a" to use your image as a solid background.

A 320 pixel wide black/white dithered GIF image will be approximately 5000 bytes, which will take about 5 seconds to download onto your WEB page. An image with 32 entries will be 15K bytes.

The image has been prepared for use as a background in a WEB page. Now we need a page to put it in! You can experiment with the look of the page by opening up a WEB browser and then loading a file which contains the following statement:

<BODY BACKGROUND="backgnd.gif">

The GIF background in this example is called "backgnd.gif". This statement is normally at the beginning of your HTML document. The BACKGROUND element is currently supported in the Netscape 1.1 browser. Make sure (and I forget to do this all the time) that the image is actually in the correct directory on your WEB server.

Back to Home Page

Questions, comments, or problems regarding this service?

Copyright © 1999 Hauppauge Computer Works, Inc. All rights reserved.
The Hauppauge logo and WinTV are registered trademarks of Hauppauge Computer Works, Inc. Windows and WebTV are trademarks of Microsoft. Corp. Company logos are trademarks of their respective companies.