Geek Answers Handbook

Display iframe on top of image?

Problem

I want to display an iframe inside an image, but have no idea how to do this. Is there a better way than purely positioning with css?

I have an html page that displays other sites, and I would like to display an iframe on the image screen below on this page.

enter image description here

+4
source share
3 answers

I made the screen a background, and then used an absolute positioned iframe. I added a YouTube snippet to the screen in a demo.

Demo

.outer {
    background-image: url('http://i.stack.imgur.com/6hnLq.png');
    width:420px;
    height:365px;
}
.inner {
    position: relative;
    background-color:;
    left: 67px;
    top: 109px;
    width:277px;
    height:150px;
}

............

<div class="outer"><iframe class="inner"></iframe>

you can even use a border radius of 2 or 3 pixels to match the image.

+6
source

iframe , . . . , iframe - JS. .

http://jsfiddle.net/weyg1opk/

<div class="image_container">
<img src="http://i.stack.imgur.com/6hnLq.png" class="preview_image">
<div class="container">
    <iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>   
</div>


.container {
    position: relative;  
    top: 110px;
    left: 68px
}
.image_container {
    width: 421px;
    height: 365px;
}
.preview_image{
    position: absolute;
}
.iframe_example {
    width: 270px;
    height: 155px;
    z-index: 1000;
}
+1

maybe you can:

  • Crop the image into pieces and replace the image on the iframe with no frame and fixed size.

or

  • Use the monitor as a background and use a div with an absolute position to exactly match the size and position of the screen.
-1
source

More articles:


All Articles