Hi Folks,
I have a number of photographs on my site, I’d like to surround them all with the attached graphic, like a photo frame.
The photos are different sizes, so it would be good if the graphics were expandable… Could I use a techique similar to spiffy corners, or is there another way I can do this using css?
Many thanks
Hi,
You could do it in the usual slicing way but it may be awkward to match the edges as they are not uniform.
I wonder whether it may be easier to use a foreground image for the frame and make it stretch to fit the image. The image is basically black so the loss of quality shouldn’t really be an issue.
I’ll have to try and make a demo and see if it will work 
The trick (or at least one way to do it) is to break that background image into three sections—a top, a middle section that can repeat, and a bottom. If the middle section can repeat seamlessly, then that container can expand to fit any photo size.
So, assuming you take that approach, create three divs: one that holds the top part of the background; one that has the middle part of the background as a repeating background image, and which also contains the actual photo; and then a bottom div that holds the bottom part of the background image.
Edit: sorry, posted over the top of Paul.
That sounds ideal, I’m not too fussed about the quality of the image like you say. Thankyou
So far I have this:
Its close, but I’d like the background image to scale to the size of the div. Not to bothered about quality of the background image, any pixelation would add to the effect anyway.
Any help much appreciated.
Hi,
The background will fit any image as required. It’s pretty straight forward (apart from ie6 and 7) and just scales the image to fit the div with absolute positioning.
(You could use percentage padding if you want the frame border width to get smaller or thicker depending on image size.)
Did you manage to get this working or do you need some more help
HI Paul,
Thanks very much I’ve got it working now.
Many thanks again your a star!