Forums

amyth91

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 ?

SgtLegend

http://css-tricks.com/perfect-full-page-background-image/

amyth91

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)
}

TheDoc

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.

amyth91

thankyou !

xpmali

thanks

treehouse : what would you like to learn today?

Forums

background-size fix for ie7