IE 8 Background Cover Stretch Bootstrap

Question

Broken Page http://pcp.biz/joomla/

I have been looking all around stack overflow for for a solution to fix this background image issue. I have been using bootstrap for the boxes and stripped out any margin.

The issue is when you set the background as cover, in IE8 it does not stretch the whole length of the image.

I have tried including Google's fix document.

 <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->

Currently I am using

    -webkit-background-size: cover; /*for webKit*/
-moz-background-size: cover; /*Mozilla*/
-o-background-size: cover; /*opera*/
background-size: cover; /*generic*/

I have also tried this ( https://github.com/louisremi/background-size-polyfill ) and bellow.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

Any ideas what I can try next, or am I doing something wrong?

Thanks, Brent

Answer 1

Fixed! At last you must use the full url for the ie path images. This is due to the IE fix not picking up the releative path.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

should be ...

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.youwebsite.com/images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://www.youwebsite.com/images/logo.gif',
sizingMethod='scale')"; 

Hope this helps someone else :)

Answer 2

If you're okay with using jQuery to resolve this, then https://github.com/pakcheong/jqthumb might help in this case. This plugin was built to resolve background-cover issue in IE6, IE7 and IE8.