iFrame auto size include bg image ALL BROWSERS

[mrjoee]

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:

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

[mrjoee]

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.

[mrjoee]

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.