Quick HTML Problem!

Hi,

I have two images.

One is a background image set in CSS. The other is an image set in HTML - <img src.....>.

The HTML image must be square but I want to overlay the background image which has a window cut out of it to make the square image look curved.

I have been trying to use z-index, is this correct? Is there a better way of doing this?

Please see attachment for a basic sketch.

Any help would be appreciated.

Thanks

The black line is the background image with a window cut out, the red line is where the square foreground image should lie.

 

cut the image in to three part as top, middle and bottom and make the top and bottom in <img src ...> and middle image as background.

 

Hi,

do U have this somewhere on web that I can see?

 

Hi there.. Check your inbox.. I send you a message .

 

You can post a sample page on the web so we can see it's code.