CSS rescaling a image

[shuka79]

Hi Guys,

I have got an issue with IE7 the site works fine in the rest of the current browsers but not IE7

Link to the page that this is happening on is http://www.mkldesign.co.uk/sites/mccann/

I have an img that I have set in the background so that when the browser is re-sized it scales the image to fit the page, however on IE7 it is making the image overfill the page so you have to scroll when I want it to stop at the bottom of the browser.

<div id="page">
<img id="main" alt="" src="img/moonlit-owl.jpg" border="0">
	<div id="hd">
	  <? include('inc/header.php');?>
	</div>
	<div id="content">

	</div>
	<div id="ft">
	  <? include('inc/footer.html');?>
    </div>
</div>

the css code

* {
	padding:0;
	border:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#FFF;
}
body {
	background-color:#110f10;
	background-color:#000;
	margin:0;
	overflow:hidden;
}
#page {
	width:100%;
	height:100%;
}

#page #content {
	clear:both;
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	z-index:1;
}
#page IMG {-ms-interpolation-mode:bicubic;}
#page img#main { z-index:0; width:100%; height:100%; top:150px; position:absolute; }

hope you can see something that i have missed
cheers
shuka

[kidwon]

Well you can apply

html{overflow:hidden;}

[shuka79]

thanks kidwon, thats done the trick. your a legend!!

[BSkiLLs]

That shouldnt be doing that anyways if done right plus cause if you have it set as the actual page background it wouldnt either. That really actually needs to be fixed or will end up with problems as you go on different browsers conflicting with it and other things if not coded in or content'ed correctly.

When it comes to correctly sizing background for every res and also looks and size. It's really a pain in the butt sometimes as cant get it looking right for all.. not all the time. At least not the exact way you want it to look for all so to speak