I am trying to make a stretched background fill the viewport. The desired effect is to have an image stretched to 100% of the viewport's width and have a 94% height. Additionally i want to vertically center the image. I'm not sure if i'm attempting this effect correctly, so feel free to suggest alternative solutions. I am having trouble making an image's height stretch to a specific dimension in IE, but width stretching and the top offset of 3% are working fine. The effect works fine in firefox but IE just leaves the images height as it was.

Test Page: http://www.onejasonforsale.com/test.html
Test Css : http://www.onejasonforsale.com/test.css

Relevant Html:

<div>
<img alt="backgroundphoto" id="bgimage" src="jason.jpg" />
</div>

Relevant Css [the whole file..]:

BODY
{
 background: white;
 margin:0%;
 padding:0%;
}

img#bgimage
{
 z-index: 1;
 position: absolute;

 left:0%;
 right:0%;
 width: 100%;

 top: 3%;
 bottom: 3%;
 height: 94%;

 border-bottom: 3px ridge white;
 border-top: 3px ridge white;
}

thanks!

- jason

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to