CSS Frame Image over another image to create a painting like effect

i have from the Website Designer the follwoing result : http://mp-books.ru/html/img/result_03.jpg

The ideea is that the stamp-like frame will remain on the page, but the person picture will change from case to case, will be take from the database.

I have arrived at this result : http://jsfiddle.net/alexpeta/MUpk8/1/ but thats the best i can do.

I have experimented with rotate like

-webkit-transform: rotate(-18deg); 
    -moz-transform: rotate(-18deg); 
    transform:rotate(-18deg); 
    -o-transform:rotate(-18deg);

but IE will not allow this transformation becuse it has Filter with an exact number of degrees : eg: 45, 90, 180 etc... and the customer wants the pic titled in each browser.

Any help on this brain-buster?

Regards, Alex

You can use a MATRIX transformation on the image

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=0.951, M12=0.309,
    M21= -0.309, M22=0.951);

would correspond to 18 degrees

The calculations:

[cos(18)  sin(18)]
[-sin(18) cos(18)]

The best solution for compatibility would be to transform the image on the server side using System.Drawing. As for the frame overlay, I think you're over-complicating things: if you know what the background will always look like, don't cut the frame out as a transparent image, cut it out with the background in it so it hides any overflow from the picture.

The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. Although you can do the same thing with images in Photoshop or The GIMP, using CSS transforms allows developers to do the same thing with any HTML markup and allows users to select the text within the transformed object. checkout this solution