Grow your CSS skills. Land your dream job.

Full Page Background

  • # August 27, 2012 at 12:19 am

    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?

    # August 27, 2012 at 12:27 am

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

    # August 27, 2012 at 8:16 am

    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%;

    # August 27, 2012 at 2:58 pm

    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');
    # August 27, 2012 at 3:00 pm

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

    # August 27, 2012 at 3:29 pm

    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?

    # August 27, 2012 at 6:21 pm

    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?

    # August 27, 2012 at 8:27 pm

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

    # August 27, 2012 at 9:00 pm

    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*/





    your content goes here



    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.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".