Image Background Border

For this to work you have to use DIV tags.

Our CSS code for the border and background looks like this:

.imageborder {
background: #ffffff url(imageback.jpg) top left no-repeat;
height: 300px;
width: 300px;
margin: 5px;
}

This sets the height and width of the image border and the margin around it so that text doesn't hug the side of the border. Then I put a background on. This background is of an image that I made in Photoshop.

So you have a main area which is for your image. Then this has a border applied and a drop shadow.

Then for the HTML code you need to use this:

<div class="imageborder"><img src="image.jpg" height="265 " width="265" alt="Image" style="margin-top: 8px; margin-left: 8px; " /></div>

The styling for the image can be applied using embeded CSS. The alternative for adding styling to the image is to add padding to the imageborder div. But doing this would mean that you would have to use the IE box hack.

When you are finished you should have something like this:

You can also make other borders using different images and code.