Adding Image Borders, Backgrounds, and Banners

The final templates in this chapter incorporate images for your listings' borders and backgrounds. Unless a particular type of image is specified, you can use any image of your choosing for these templates.

Template 8.21. Full-Page Image Border

The template shown in Figure 8.21 uses an image file as a thick border around your entire item listing. For best effect, the image file you use should use a small pattern, something easily discernable from within the width of the border.

Figure 8.21. An image used as a border around the item listing.

This effect is accomplished by means of nested tables. The outside table has a graphic file (BORDER-URL) as its background; the inside table has a white background. Thus you see the white background sitting on top of the graphic background. Here's the code:

<!--BEGIN OUTSIDE TABLE--> <table width="80%" border="0" cellpadding="40" cellspacing="0" align="center" background="BORDER-URL"> <tr> <td> <!--BEGIN INSIDE TABLE--> <table width="95%" border="0" cellpadding="20" cellspacing="0" bgcolor="white" align="center"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL" width="150"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one   </p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table> <!--END INSIDE TABLE--> </td> </tr> </table> <!--END OUTSIDE TABLE-->

Template 8.22. Multiple Nested-Table Image Border

If one image border is cool, then three image borders nested inside each other must be three times as cool. That's the theory behind this template, shown in Figure 8.22, that nests four separate tables to create a three-image border.

Figure 8.22. A nested image border around the item listing.

The code for this template uses the same approach as the code for Template 8.21, but with two more tables nested around the interior two tables. Make sure you use image files that contrast nicely with each other.

<table width="80%" border="0" cellpadding="40" cellspacing="0" align="center" background="BORDER-URL1"> <tr> <td> <table width="95%" border="0" cellpadding="40" cellspacing="0" align="center" background="BORDER-URL2"> <tr> <td> <table width="95%" border="0" cellpadding="40" cellspacing="0" align="center" background="BORDER-URL3"> <tr> <td> <table width="95%" border="0" cellpadding="20" cellspacing="0" bgcolor="white" align="center"> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL" width="150"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one</p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table>

Template 8.23. Full-Page Image Background

Now let's turn our attention to the background of your listing. Just as you can use a solid color as the background to a table, you can also specify an image file to be used as the background, as shown in Figure 8.23.

Figure 8.23. A small image file forming a repeated background pattern.

The key to adding an image background to your listing is to incorporate the background attribute in the <table> tag. If the image file you use is small, it will be repeated within the table to form a pattern. If the image file is large enough, you'll see the entire image as the background. This template uses the first approach, with a single small image forming a background pattern.

Tip

If you use a light background image, you're okay with standard black text. If you use a darker background image, however, you may need to change to white, yellow, or cyan text. In addition, be careful about using background images that are too busy, or that have both dark and light images; a busy background makes your text harder to read.

<table width="80%" border="0" cellpadding="40" cellspacing="0" align="center" background="BACKGROUND-URL"> <tr> <td> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">Title</h1>   <p><img src="/books/2/949/1/html/2/URL" width="150"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one   </p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service</p>   </td> </tr> </table>

Template 8.24. Left-to-Right Gradated Background Image

The effect you see in this template comes from using a background image that fades (gradates) left to right from dark to light. The left side of the image should be a darker color, and it should fade (quite quickly) to a plain white background. The white part of the background makes it easy to read your description text; the darker part adds necessary, but not intrusive, color to your listing.

To create this template, we're using the exact same code as in Template 8.23, with one modification. Since we want the gradation to start on the far left side of the page, we're setting the width of the table at 100%, and the width of the interior row to 80%; this is the exact opposite of how we typically set these settings.

The key to this effect is to use a background image that is wide but short. It needs to be wide enough so that the image does not repeat in the middle of your listing; I recommend using an image with a width of 1400 pixels, just to be on the safe side. The height, however, doesn't have to be tall at alla few pixels high is more than enough. That's because the single image will repeat over and over again down the page, creating a seamless effect.

Caution

Remember, this code can't add a gradation to a regular solid-color graphic. You have to use an image file that contains a gradated graphicthat is, an image that fades from a dark color on the left to white on the right. It's the choice of graphic that makes this template work, not the HTML code per se.

For the example in Figure 8.24, I've used a blue gradated background file. It's included on the accompanying CD; the filename is blue-fade.jpg, and it's sized at 28 x 1800 pixels. Feel free to use this file in your own templates.

<table width="100%" border="0" cellpadding="40" cellspacing="0" align="center" background="BACKGROUND-URL"> <tr> <td> <tr>   <td align="center">   <h1 style="font-family: Arial; font-size: 24pt;   font-weight: bold">   Title   </h1>   <p><img src="URL" width="150"></p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph one<   /p>   <p style="text-align: left; font-size: 12pt;   font-family: Arial">   Description paragraph two   </p>   <p style="text-align: center; font-size: 8pt;   font-family: Arial">   <strong>Terms of Sale</strong><br>   Terms of service   </p>   </td> </tr> </table>

Figure 8.24. A gradated color background.

Template 8.25. Top-of-Page Image Banner

Our final template in this chapter is a popular one. As you can see in Figure 8.25, this template uses an image banner to provide graphic interest at the top of the item listing. There is a plethora of image banners available for download from various sites on the Internet; it's good to choose a banner that ties in with the product you're selling, as well as one that matches the color scheme of the rest of the listing.

Figure 8.25. An image banner at the top of the item listing.

In this template, the image banner is inserted at the top of the listing, in its own table row before the title row. The color of the title and TOS text are specified to tie into the color of the banner graphic. Replace BANNER-URL with the URL of the banner image file; replace PICTURE-URL with the URL of your normal product image.

<table width="80%" align="center" cellpadding="0" cellspacing="0" border="0" <tr>   <td align="center">   <img src="/books/2/949/1/html/2/BANNER-URL">   </td> </tr> <tr bgcolor="lightblue">   <td align="center">   <h1 style="font-family: Verdana; font-size: 24pt;   font-weight: bold; color: darkblue">   Title   </h1>   <img src="PICTURE-URL">   <p style="text-align: left; font-size: 12pt;   font-family: Verdana; margin: 10">   Description paragraph one   </p>   <p style="text-align: left; font-size: 12pt;   font-family: Verdana; margin: 10">   Description paragraph two   </p>   <p style="text-align: left; font-size: 8pt;   font-family: Verdana; color: darkblue;   margin: 10">   <strong>Terms of Sale</strong>   <br>   Terms of service   </p>   </td> </tr> </table>