html tutorials web design help css tutorials free web graphics diy search engine optimization

Put a Frame Around Digital Photos

Instead of just posting a plain, frameless picture on your site, you can make a great custom frame for it without knowing a lick about creating graphics. By using a seamless background tile for the table background you can create a very nice, original frame that tickles your fancy—and I'll just bet your fancy likes to be tickled!

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?

If you thought the picture with a frame looks better, please continue. If you thought the picture without the frame looks better, send me a dollar and apologize, gosh darn it.

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;" />

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.
For best frame results, use a background image of natural looking material like the wood I used here, or a texture with colors that compliment your image.

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

Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)