Grow your CSS skills. Land your dream job.

background-size fix for ie7

  • # January 14, 2012 at 7:43 am

    is there any way to fix “

    background-size:contain/cover/auto

    ” for IE7. i tried using an image within an absolute div with “width:100%” but then there comes design problems. so, isn’t there any way to fix it ?

    # January 14, 2012 at 1:34 pm

    tried this out, but it is not working. except for i cannot use the “div” method as i already have many div’s there. i am using this for header

    #header {
    width:100%;
    height:100px;
    float:left;
    background:url(../images/main/header.jpg) no-repeat center center;
    background-size:cover;
    behaviour:url(ie-css3.htc);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main/header.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main/header.jpg', sizingMethod='scale')";
    }

    and this for an item page

    .item {
    width:16.66%;
    height:100%;
    float:left;
    background:url(../images/main/item_background.png) no-repeat bottom fixed;
    background-size:contain;
    -webkit-background-size:contain;
    -moz-background-size:contain;
    -o-background-size:contain;
    -ms-background-size:contain;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main/item_background.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/main/item_background.png', sizingMethod='scale')";
    behaviour:url(ie-css3.htc)
    }
    # January 15, 2012 at 9:05 pm

    I’m pretty sure that fix posted above is the only thing you can do for IE7. Also, fun fact, you should be using it for Chrome as well. Chrome (shockingly) will start to chug on pages that have a full-sized background that is using the background-size: cover method.

    # January 16, 2012 at 6:40 am

    thankyou !

    # December 26, 2012 at 10:58 pm

    thanks

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

You must be logged in to reply to this topic.

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