Although I haven’t reserved much time for it lately, I love experimenting with css and trying to come up with new personal techniques to add to my bag of webdesign tricks. Usually this involves coming up with an idea, checking to see if it has been done, and trying to do it better. I’m a big fan of alistapart, as it’s a community of people who have the same mindset. This time however, I decided to just wing it.
I really wanted to create a border inside an image as a decorative overlaying frame for the image.
The technique involves 2 <div>s. The first <div> is a container that I give the class picturebox. Picturebox has a background-image that I wish to display, an outer border to seperate it from the page, and padding defined in the css.
.picturebox {
background-image:url(pontevecchio.jpg);
background-repeat: no-repeat;
border: 1px solid #000000;
padding:9px;
width: 620px;
}
The second <div> is actually the frame overlay that I want to put on the image, which I lovingly refer to as the framebox.
.framebox {
border: 5px double #FFFFFF;
height:440px;
position:relative;
}
With the picturebox and the framebox classes defined the html is stupidsimple:
<div class="picturebox">
<div class="framebox"></div>
</div>
And Viola!, a nice little css picture frame. I know there are probably other ways of doing this, but this seemed to work for me.