Triple Border Tutorial

This tutorial will show you how to do a triple bordered background like you see on this page using 3 different background images.

1. Highlight and copy the code in the box below.
2. Paste it into your editor.
3. Change the "BACKGROUND.jpg's or .gif's" to the images you want to use.
4. Change the color #'s for the "bgcolor", "text", "link", "vlink", "alink", "bordercolor" as needed.
5. Remove the content line and add your own content.

See below for extra hints and tips....

<html> <head> <title>YOUR PAGE TITLE</title> </head> <body bgcolor="#B1C0D3" background="http://www.kajira-dreams.com/Kajira-Dreams-WebGraphics/Tutorials/triplebackground/OUTSIDE_BACKGROUND.jpg" text="#424062" link="#9A6B73" vlink="#969792" alink="#FFFFFF"> <BR> <center><table border="1" width="95%" bordercolor="#697F97" cellpadding="30" cellspacing="0" bgcolor="#B1C0D3" background="http://www.kajira-dreams.com/Kajira-Dreams-WebGraphics/Tutorials/triplebackground/MIDDLE_BACKGROUND.jpg"> <tr> <td width="100%"> <center><table border="1" width="98%" bordercolor="#697F97" cellpadding="5" cellspacing="0" bgcolor="#B1C0D3" background="http://www.kajira-dreams.com/Kajira-Dreams-WebGraphics/Tutorials/triplebackground/INNER_BACKGROUND.jpg"> <tr> <td width="100%"> <BR> <center> <!--------REMOVE THIS LINE AND ADD YOUR PAGE CONTENT HERE--------> <BR> </td></tr></table> </center> </td></tr></table> </center> <BR> </body> </html>

Hints and Tips....

The BGCOLOR is the color of the page before any graphics load. Keep this color consistent for all the BGCOLOR's.

The BORDERCOLOR is used to create the line going around the outside of the backgrounds.

BORDER="1" can be changed to "2" for a wider line.

The WIDTH % can be changed to make each background wider or narrower.

Need to know what #'s to use for colors? Visit: Complete HTML True Color Chart.

Have fun playing!



Kajira Dreams Web Backgrounds

Kajira Dreams Web Graphics and Help