Image Borders for CSS

[Chris]

Is it possible to set one image (or a set of images) as a border for another image.

For instance say I have an image of a picture frame, is it possible to set this image to be a border for another image I make? I've never seen the ability to set a graphical border with CSS but I'm far from an expert.

[Emancipator]

I did this in my gallery using div opacities. I wanted my gallery images to have bloody border on them so i did up the image, and then overlayed it onto the actual gallery image the person is looking at. Was a neat effect.

I would think CSS could do it but i am not a CSS expert either.

[Pulse]

As far as I know you can't do it directly with css. example: border: url(blah);

You would have to do it the old school way

Create a div the size of the frame image, set the image to the background of the div, set the padding to the width you want your border and put your image in the center.

[Emancipator]

almost exactly how i did it Pulse, just throw in a transparent png and my image was BEHIND the div overlay :)

[Chris]

But you would have to know the size of the image in advance right? No on the fly stuff. (without js anyways).

[michael_gersitz]

Create a div the size of the frame image as a percentage, then set padding, then set image width as a percentage too.

[Emancipator]

Michael hit it bang on. Right now what im working on is sampling an image with GD so i can use a portion to make some cool collage effects within the effect we are discussing.

[michael_gersitz]

Michael hit it bang on. Right now what im working on is sampling an image with GD so i can use a portion to make some cool collage effects within the effect we are discussing.


It should work, depending on what Chris wants to use it for. It will not work that way if the images are very not similiar that are going in the picture frame. ie 20 x 600 and 450 x 300. THen when you set the values for the percentages, you will be all messed up, since you can not set up a default percentage. :(

[Emancipator]

yeah you hit on a bug i encountered. I am now using php gd to sample the image, and snag a section after i resize it using GD.. so you get a cool abstract look, automatically.