How to center one image over another

Question

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 :(

Answer 1

I usually use this:

HTML:

<div id="frame">
    <img id="myImg" src="main.jpg">
</div>

CSS:

#frame {
    position: relative;

    width: 597px;
    height: 405px;

    background-image: url(frame.png);
    background-position: center;
    background-size: cover; }

#myImg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;
    margin: auto; }

This works for all images and other elements with fixed dimensions, or a set max-width and max-height.

I hope this works for you :)