Putting an image as a frame around an iframe?

Question

I have a site I'm trying to display in a mobile format, but on a wide screen. I'm convinced the iframe is the way to go.

I'm trying to load the iframe inside an image of an iPhone. You can see an example here.

Once you see it, you should be able to tell what I'm trying to do.

I've got this CSS down to allow for the iframe to be displayed inside the iPhones screen...

/*iframe Overlay*/
#over{
    position: absolute;
    top: 84px;
    left: 133px;
    width: 485px;
    height: 320px;
}

iframe{
    width: 100%;
    height: 550px;
    background-image: url(../images/iphone5_hollow_750x380.png);
    background-repeat: no-repeat;
}

And here's the associated HTML...

   <div id="over"><iframe src="http://webfro.gs/south/tour"></iframe></div>
        <iframe src="http://www.google.com">
            You don't have iframe support, unfortunately
        </iframe>
    </div>

Questions...

I have no idea why, but I'm being forced to keep that iframe snippet with the google website in there. If I take that out, then the phone image doesn't display.

Why is that?

Is this the best way to do this? Something easier out there?

Getting this to display in IE8 seems to be a whole other nightmare.

Any thoughts?

Answer 1

Ok first we need to change the html a little. All you need is:

<div id="over">
    <iframe src="http://webfro.gs/south/tour"></iframe>
</div>

Then for the CSS:

#over {
    background-image: url("../images/iphone5_hollow_750x380.png");
    background-repeat: no-repeat;
    height: 380px;
    width: 750px;
    margin: 0 auto 30px;
    position: relative;
}

iframe {
    height: 321px;
    width: 483px;
    position: absolute;
    top: 28px;
    left: 134px;
}