I applied these styles to the image and the body, but it still does not scale properly. I want IE to distort the image, and not maintain aspect ratio, but it will only expand horizontally (not vertically). I am using the styles that work on another site, but it is not scaling. Works great in Firefox, but not in IE. The test site I'm hitting works in IE as well as Mozilla (and has no javascript)
Any ideas what could be locking the aspect ratio? Is this something that can be controlled serverside (through IIS), or is it just rendering HTML clientside?
I'm out of ideas, anything that could help would be appreciated. The CSS I'm applying to the above code is listed below
body {
margin: 0px;
padding: 0px;
background-color: #555656;
overflow: hidden;
}
#background_image {
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
z-index: 1;
}
Main Topics
Browse All Topics
by: mshogrenPosted on 2006-06-29 at 14:36:42ID: 17013778
You need to specify the height of the containing elements like this:
<body width="100%" height="100%">
<div id="background_image" width="100%" height="100%"><img src="Sample.jpg" width="100%" height="100%" border="0" /></div>
<div id="content">
I have page contents here
</div>
</div>
</body>
Note that this uses 100% of the screen size give or take margins and padding. If you want to use 100% of the viewport you will need to use Javascript to dynamically resize the image.