graphical borders for images

I want to put a graphical border around images of unknown size. I can do it when I know the size of the image. Note that the way I'm doing it requires the size to be included in both the markup and the CSS. Here's a short example of what I'm dong now:

<!DOCTYPE html PUBLIC "-//W3C//DTD xHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/dtd/xhtml1-strict.dtd">
<html lang="en">
<head>
 <title>Framing Images</title>
 <style type="text/css">
 <!-- 
 .frame {
 width: 532px;
 height: 365px;
 background: url(images/bottom-left.png) no-repeat left bottom;
 }
 .frame-outer {
 background: url(images/bottom-right.png) no-repeat right bottom;
 }
 .frame-inner {
 background: url(images/top-left.png) no-repeat left top;
 }
 .frame img {
 background: url(images/top-right.png) no-repeat right top;
 padding: 16px 16px 13px 16px;
 }
 -->
 </style>
</head>
<body>
 <div class="frame">
 <div class="frame-outer">
 <div class="frame-inner">
 <img src="images/image.jpg" width="500" height="331" />
 </div>
 </div>
 </div>
</body>
</html>

My goal would be not to have to put the size of the image in either place, and have it size automatically to the image.

Thanks!

graphical borders for images

images borders

superbad

swa66

essiw

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week