How to apply iframe over an image?

1 replies
  • WEB DESIGN
  • |
I iframed part of one of my websites that I would like to 'float' over an image.

Let's pretend this is my image(see attachment) the red part is going to be my design and the white part if where I need my iframe to sit.

Here is the code I have for my iframe:

<div style="overflow: hidden; width: 232px; height: 287px; position: relative;" id="i_div"><iframe name="i_frame" src="http://www.solojungle.com/" style="border: 0pt none ; left: -1046px; top: -471px; position: absolute; width: 1920px; height: 965px;" scrolling="no"></iframe></div>

Easiest way to apply that iframe in that image? I've been trying to look up css ways, just getting confused all around.
#apply #iframe #image
  • Profile picture of the author oknoorap
    Use CSS Background will save your work.

    HTML Code:
    <div id="iframe-box">
       <iframe name="myiframe" src="http://www.solojungle.com/" scrolling="no"></iframe>
    </div>
    CSS:
    Code:
    #iframe-box {
       background: url(http://domain.com/path/to/your/image.png) no-repeat;
       padding: 10px;
    }
    
    #myiframe {
      border: none;
      width: 500px; /* Customize by your own */
      height: 150px; /* Customize by your own */
    }
    {{ DiscussionBoard.errors[7627481].message }}

Trending Topics