Left Border Background Transparent GIF Trick

Left Border Background Transparent Gif Trick

To keep content off the border on left border backgrounds, many people use what has come to be called the transparent GIF trick. All you do is align a transparent GIF image to the left side of the page, which forces the content that follows it to the right of the transparent GIF where it's off of the nifty border area. Example:

<body background="image_name.jpg">
<img src="spacer.gif" width="60" height="1600" align="left">

Under your body tag where you'd normally start your content, code an image tag with the transparent GIF image and add your content under that. You'll have to play around with the width and height to get them to fit your backgrounds border width and the page length, but that only takes a minute of trial and error.

The important thing is to be sure to include the align="left" part of the tag. This places the transparent gif on the left side of the page and forces the rest of your content to the right side of the transparent gif, and therefore off the border.

You can download a transparent gif from inside the table below. Just right click your cursor inside the little box and choose the save image/save picture option.

The transparent gif is really only a few pixels wide by a few pixels high so the file size is minimal and it will download as fast as text. You can specify the width and height of the image to the size you need and the browser will stretch it to fit. Since it's transparent, there is no image quality lost.

Before using this trick, you may also want to read how to accomplish the same thing using a table. That tutorial is here.

Back | HTML Tutorials Index

Web Design

Site Information

More Boogie Jack Sites

Left Border Background Transparent Gif Trick