JUN
2008
02
Here is what we will be creating. All images you see below are identical, the only difference is the frame laid on top of each one.
How
In lamen terms we are placing another image on top of the orginal, in the same way you would place a frame over a photograph. This technique requires the use of PNG images to construct the frame around your main image. If you don't already know, IE6 doesn't display PNG's alpha channel allowing for transparency, but no worries you can find a PNG Hack tutorial here to solve that issue.
This CSS technique uses an extra <span> in front of where you call your image. Once positioned absolutely, the frame can now float on top of the main image creating the illusion of a frame.
The power behind this technique is it requires no altering of the orginal image to provide it with a decrotive frame. Also you can control all the frames from CSS, allowing you to change all the image frames site wide with just a simple CSS alteration.
CSS Styles
.frame {
height: 175px;
width: 262px;;
}
.frame img {
padding: 7px 0 0 10px;
}
.frame span {
background: url(frame.png) left top no-repeat;
display: block;
height: 175px;
position: absolute;
width: 262px;
}
As for the HTML you just need to define your class, insert the extra <span></span>, reference your image, and close the class container.
HTML
<div class="frame">
<span></span>
<img src="image.jpg" alt="" />
</div>
