www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Putting an image as a frame around an iframe?

  1. #1
    Join Date
    Dec 2012
    Posts
    81

    resolved [RESOLVED] Putting an image as a frame around an iframe?

    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...

    Code:
    /*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...

    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. I have no idea what the Google website has to do with my image.

    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?

  2. #2
    Join Date
    Mar 2012
    Posts
    1,560
    The abovecode does not make sense:
    - The overlay is position absolute, but the iframe isn't. Why not???
    - The overlay is smaller than the iframe. if it is supposed to surround the iframe, it should be an underlay (behind) not an overlay, and should be larger.
    - Why does the iframe have a background image??? Surely that serves no purpose, and I'mnot sure it is valid anyway?
    - If I've misunderstood, and the iframe is intended to hold the background image, then that is wrong anyway. Use <img> to display an image "behind" the foreground.
    - Consider using z-index with position absolute to put the backgrouns behind the foreground.

  3. #3
    Join Date
    Dec 2012
    Posts
    81
    Once I figured all this out, I was much better off, too... Here's what I did and it's valid and it worked.



    HTML...

    HTML Code:
                    <div id="iphone4">
                        <iframe src="http://webfro.gs/south/tour"></iframe>
                    </div>
    CSS...

    Code:
    /*iPhone4 iframe*/
    #iphone4 {
        background-image: url("../images/iphone4_hollow_750x380.png");
        background-repeat: no-repeat;
        height: 380px;
        width: 750px;
        margin: 0 auto 30px;
        position: relative;
    }
    
    
    /*Mobile iframe CSS*/
    iframe {
        height: 321px;
        width: 483px;
        position: absolute;
        top: 28px;
        left: 134px;
    }
    I realized about half of this before reading your response, and the rest after reading your response. Thanks for your help (and the boost!).

    Regards,

    Jared

  4. #4
    Join Date
    Mar 2012
    Posts
    1,560
    Good to hear that you got it working, but one point:

    The URL should be terminated with a slash "/". It's quicker that way.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles