Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    iFrame auto size include bg image ALL BROWSERS

    I have designed a portfolio website that loads photos as background images.

    The site, including the loaded background images will resize to fit any display, however my client wishes to have a maximum resolution so the photos cannot be looked at in too much detail. Let's say it auto-resizes but maxes out at 1344px by 800px.

    I have tried embedding the site using an iFrame and the following CSS code:

    Code:
    <style type="text/css">
    
    iframe {
    width: auto;
    height: auto;
    max-width: 1344px;
    max-height: 800px;
    }
    
    </style>
    This works like a chram in Chrome and Safari. But it seems as if IE and Firefox do not take into account the background image.

    The site i'm trying to embed is: tarahickman.co.uk/new
    This is the iframe I have tried: http://tarahickman.co.uk/taranew.html

    If anybody can help that would be great.

  • #2
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Update

    In case this makes it any easier, I've just realised that all browsers understand the width of the background image loaded, just not the height.

    Still not getting anywhere though. I've tried embedding in divs and all sorts.

  • #3
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just another quick shout out to let you know I don't have to use an iFrame if this isn't the best solution. If anybody knows of any JavaScrpit that will max-width a page or any alternative css methods then please share...

    Thanks.


  •  

    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
    •