How to center one image over another

How to center one image over another

I have 2 images - one is the main image and the other is like a picture
frame that I'd like to position over the top of the main image. The
picture frame image is a png with a transparent center so the main image
shows through.
The dimensions of the images are important - the inner main image has to
be smaller than the frame so it is only visible through the center:
main.jpg = 367 x 550
frame.png = 405 x 597
I thought I had it with the following code...
<div style="background-image:url('/main.jpg') no-repeat scroll center
center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>
...which works great until you see the screen on a mobile phone; the
frame.png stretches because I've given the width as 100% but the
background main.jpg doesn't stretch along with it.
I need the design to be fluid, so I need the images to stretch.
Is there a way to make sure the background stretches the same as the main
image?
I've tried all kinds of different methods to get this working, absolutely
positioning the frame in a div floating over the main image, etc but I
couldn't get the main image to appear centered horizontally and vertically
when I did that.
Is there any way to achieve what I want without resorting to javascript?
The reason I'm using 2 images by the way is because of file size. I need
the main image to be jpg so I can keep it small, but I also need the
transparency on the frame so that has to be png :(