#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    9

    Exclamation Proportionately scaling of a background image fix for IE6 or at least IE7


    Hi:

    I am having trouble implementing a background image using CSS for compatibility with IE7, and if possible, IE6.

    In my CSS, I have the following code defined

    Code:
    body{
    	margin:0px;
    	height:100%;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: black;
    	background-color:#fff;
    	background-image: url(../images/bg.png);
    	background-repeat: no-repeat;
    	background-attachment: scroll;
    	background-position: absolute;
    	background-size: 100%;
    }
    
    /*
    body{
    	margin:0px;
    	height:100%;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: black;
    	background: #fff url(../images/bg.png) no-repeat center center fixed;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    }
    */
    The results work fine in Chrome, Safari and Firefox on both PC and Mac. However, the image does not scale and gets cropped in IE7.

    I have tried it two different ways, both of which are in the code, and one of which is commented out. Neither way works properly with IE7.

    Does anyone have a solution to this that they could share with me.

    Thanks.
    Last edited by alisamii; May 18th, 2011 at 11:17 AM. Reason: Fixed title
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    Well the short answer would be you can't. IE (prior to 9 anyway) doesn't support the background-size property. The longer answer would be you might be able to fake it, if it's really important to be the same in IE. Here's a potential solution:

    http://webdesign.about.com/od/css3/f/blfaqbgsize.htm
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Here's how I've done it before: http://www.dynamicsitesolutions.com/...kground-image/

    By the way, "absolute" is not a valid value for the "background-position" property.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2010
    Posts
    37
    Rep Power
    9
    Well, that solution does not work for me.

    What I need is for the image to maintain it's proper aspect ration, be positioned aligned top and left, and scale.

    I have tried your option but for me, it produces a distorted scaling.

    Originally Posted by Kravvitz
    Here's how I've done it before: http://www.dynamicsitesolutions.com/...kground-image/

    By the way, "absolute" is not a valid value for the "background-position" property.
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    The simple way to keep the same aspect ratio is to only set the width or the height instead of both.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo