Positioning iframe content

So a background image appears framed

[imjustme]

I hope someone will have some advice for me.

I have one large image I want to put on a website and I want a frame to go on top of the image in the very center, as if the image is framing the frame.

I used to know how to do this but it was years ago before JavaScript so I'm trying to remember if this was a CSS or HTML thing.

I can't find any answers online. Can someone please help?

[tangor]

Frame or iframe? Two different things!

[imjustme]

Whichever will work! lol. Just like a rectangle box that is actually a separate webpage. I know the code that involves "iframe" but I can't get it go go over top of my image, it wants to put it below the image. Thanks for any help you may have.

[tangor]

I generally use a div to contain any iframe in use. I can locate the div where I want...

[imjustme]

Yes, div sounds familiar! Thanks so much! I'm sure I'll be able to google the code. You're the best! TY! *hugs*

[SuzyUK]

Use the image as a background to a div or the body element whatever, position the div relatively.. i.e. just put

position: relative;

on it (no co-ordinates or fixing is necessary).. this is so the iframe will know to base it's position from it - Then Absolutely Position the iframe inside the div top 50% and left 50% (to find the center) then negative margin the iframe half it's width and height to move it back up and out from the center.

say the iframe is 300px x 400px

pseudo code, which assumes full page width/height is required:

<div>
<iframe>
</div>

CSS:

html, body {margin: 0; padding: 0; height: 100%;}

div {
height: 100%;
position: relative;
background: #000 url(yourlargeimage.gif) no-repeat 50% 50%;
}

iframe {
width: 300px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -150px;
}

that's one way but presents one of the ways to center.. obviously works best if you know the width/height of the iframe

Good Luck!