Creating an offset 'picture frame' using CSS

[tbsg]

I'm looking for a way to create an offset "picture frame" that would appear behind images on the site I'm building. Ideally, the frame would shrink/expand depending on the size of the photo.

You can see what I'm trying to accomplish at this link http://www.cmswebsolutions.com/girl.jpg. The frame is the beige in the background 16px wide offset by approx 15%.

Is there a way of doing this using CSS rather than tables? Thanks :-)

[7stud]

Hi,

One way to do that would be two use two images: one for the tan offset, and one for the image. Then using absolute positioning place the tan offset where you want it, and then place the image 20px to the right and 20px lower than the tan image.

Another way is to nest the image inside a div tag and use the background color of the div to provide the offset:

<div><img src="image1.jpg" /></div>

In IE6, I initially tried this with a 50 x 50 px image:

div{
color:red;
background-color: black;
height: 50px;
width: 50px;
}

img{
margin-top: 20px;
margin-left: 20px;
}

but even though the div's height and width is set, the div stretches in height and width to contain the image + the img margins. But, when I added

position: absolute;

to the img properties, the div allowed the image to exit it's borders. It also works in the latest Firefox browser.

[tbsg]

Thanks 7stud.

I was able to find a similar solution on Phil Baines site at http://wubbleyew.com/tests/dropshadows.htm. It was much easier to find an answer once I realized I was looking for drop shadows. :-)

Still doing a bit of fine tuning to get it pixel perfect but here's my adaption so far:

<div class="imagebox"><img src="images/image.jpg" alt="image" /></div>

.imagebox{
float:right;
clear:right;
background: url(images/shadowAlpha.png) no-repeat top left !important;
background: url(images/shadow.gif) no-repeat top left;
margin: 10px 0 10px 5px !important;
margin: 10px 0 10px 0;
}
.imagebox img{
display: block;
position: relative;
background-color: #e2bc7f;
border: none;
margin: 16px -16px -16px 16px;
padding: 0;
}