Textured Background

With Gradient Colored Borders

Now that you have mastered the Gradient Colored Border, using solid background colors, lets explore making your page using a textured background and still using Grad Colors for your borders.

This time we will jazz the page up a little and put a double border on the left and a single border on the right.

Notice that the borders have a tubular look to them. This is accomplished by making 3 <td> cells having the same width, and using the same Gradient Code to shade them correctly.

background-image:linear-gradient(left, #191927 0%, #c0c0c0 50%,#c0c0c0 50%,#191927 100%);
background-image:-webkit-linear-gradient(left, #191927 0%, #c0c0c0 50%,#c0c0c0 50%,#191927 100%);
background-image:-ms-linear-gradient(left, #191927 0%, #c0c0c0 50%,#c0c0c0 50%,#191927 100%);

Remember how we used a small <td> cell of about 10-20 pixels to move our body coding to the right!! Well we are going to use the same technique to keep the body of our page from encroaching on the right border that we are going to construct.

    Page Construction

    Body Code

    This is the body code that we must start with. Use your own colors and backgound but the background should be seamless or textured for the best results.

    <body bgcolor="#191927" background="../b/75.jpg" text="#8FBC8F" link="#ee82ee" vlink="#ee82ee">

    The Table

    We will make our table width=960 and set the cellpadding, cellspacing and border at 0.

    The table will have 6 <td> cells. 2 for the left border, 1 for the left spacer, 1 for the body, 1 for the right spacer and 1 for the right border. Here again, the sum of the <td> cells MUST add up to the width specified in the <table> tag.

    Don't forget to center the table as PC users can set their screen widths wider than 960.

    <div align="center">
    <table width="960" cellpadding="0" cellspacing="0" border="0">

    Left Border

    <td width="30" valign="top"><div class="css3gradient1"></div></td>
    <td width="30" valign="top"><div class="css3gradient1"></div></td>

    Left Spacer

    <td width="10">&nbsp;</td>

    Body Cell

    <td width="850" align="center" valign="top">
    Page coding goes here

    Notice the alignment of this cell. Everthing is centered and vertically aligned so that your data will start at the top and be centered. You can easily overide this center alignment, as was done in this tutorial, by use of the <p> tag. Just set the alignment left, <p align="left"> when you want your data on the left and close the </p> paragraph tag when you want your data recentered.

    Right Spacer

    <td width="10">&nbsp;</td>

    Right Border

    <td width="30" valign="top"><div class="css3gradient1"></div></td>

    And finally lets close the table and our page.


    Back to Part I