Put a Frame Around Digital Photos

Look at the two pictures of me below. It's the same picture, but one has a table built around it using a seamless background. You'll find plenty of background choices in my free graphics section.

I know it will be hard to concentrate on which picture below looks best with such a handsome chap to distract you, but do try. So, which looks better, the picture with the frame, or the picture without?

Here's the code...

<table style="background-image: url(images/wood.jpg);
 width: 221px; height: 298px; border: 2px solid black;">
<tr><td style="text-align: center; vertical-align: middle;">
<img src="images/me.jpg" width="180" height="250"
 style="border-top: 2px solid #6C4A46;
        border-right: 1px solid #947C72;
        border-bottom: 1px solid #947C72;
        border-left: 2px solid #6C4A46;" />
</td></tr></table>

Detailed Instructions

• The first line opens the table and sets the background image, in this case a wood background. You need to change "url(images/wood.jpg)" to the name of the background image you use. If you don't keep your images in a directory called images you'll also need to change the image path to the directory where you do keep them. If you keep them in the same directory as your HTML files, just remove the path reference altogether.
• The second line is a continuation of the CSS used to set the background image in the first line, only here we set the table width and height, as well as place a border around the table. You'll want to set the table size so it's larger than your image or no background will show. The border is optional.
• The third line sets the table row and table data cell, and centers the image within the table data cell. No changes are needed in this line.
• The fourth line sets the image you want to frame and sets the width and height of the image. You'll need to change "images/me.jpg" to the name and path to your image, and change the width and height to the size of your image.
• Lines 5-8 in the code sets the border around the image you want to frame. By setting the color of the border on the top and right sides slightly narrower and lighter than the color of the border on the top and left, it offers an illusion of light and shadow, which adds depth to the effect.
• The last line merely closes the table, no changes are needed.

You can get even fancier with your framing techniques, play around and have fun with it.