Forums

noahgelman

I can't seem to get a full page background working that works in IE 8 and lower. I was following this article: http://css-tricks.com/perfect-full-page-background-image/

It doesn't seem to resize properly in IE 8 and lower. Can anyone do a quick version?

TheDoc

CSS3 Progressive way supports IE9+. What are you using for IE8?

rajiv

hi noahgelman,

u can use this code, i think it will work for you:
background: url(images/xyz-bg.jpg) no-repeat center bottom #fff;
width: 100%;
margin: 0 auto;
background-size:100%;

noahgelman

From what I read you can add a filter that will allow the image to scale right in IE8

-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image-file-path.jpg', sizingMethod='scale')";
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image-file-path.jpg', sizingMethod='scale');

noahgelman

@rajiv, thanks, but this only accounts for the width when scaling, it doesnt account for the height as well.

TheDoc

And you updated the path to your image for it? (I have to ask... haha)

Are you testing on a proper version of IE8 or through something like Adobe Labs?

noahgelman

Lol, yeah, I updated the file path, I switch it to a filler before posting here. I am using IE8 via IE9. Do you think that might be the issue?

TheDoc

Hmmmmm. Perhaps, though I can't be certain!

amyth91

to get a nice full size background image use


/*styles*/

#wrap
{position:absolute;
width:100%;
height:100%;
overflow:hidden}

#wrap img
{width:100%;
height:100%}

#content-wrap
{position:relative;width:100%;
height:100%;
overflow:auto}

#content
{width:960px;
margin:auto}

/*html*/
<div id="wrap">
<img src="{link to your image}"/>
<div id="content-wrap">
<div id="content">

your content goes here
</div>
</div>
</div>

In this wasy you can get a nice full size background even in IE6, IE7 , i just created one such website. so i have this trick fresh in my mind.

treehouse : what would you like to learn today?

Forums

Full Page Background