IE8 fix for background-size property? Retina Image

Question

I am using the following CSS for Retina images and it works perfectly in FF, Chrome, Safari but not in IE.

Is there a fix for IE for using background-size - and if so, how could I implement it using my current code?

CSS:

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
}

HTML

<div class="arrow-big-right"></div>

Can someone explain how I fix this for IE?

Many thanks for any help :-)

score 39 · Accepted Answer · edited May 23 '17 at 11:44

IE8 and below simply don't support background-size so you're either going to have to use the AlphaImageLoader Filter which has been supported since IE5.5:

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}

Or use some method of targeting IE versions via CSS to apply an alternative to your background for IE8 and below users.

It's also worth noting, as Matt McDonald points out, that you may see two images as a result of using this technique. This is caused by the IE filter adding a background image in addition to, instead of replacing, the standard background image. To resolve this, target IE via css using your preferred method (here's a method, my personal favourite) and remove the standard background-image for IE8 and below.

Using the first technique from Paul Irish's blog post to do this, you could use the following:

.arrow-big-right {
    display: block;
    width: 42px;
    height: 48px;
    margin-bottom: 1.8em;
    background-image: url(arrow-big-right.png);
    background-repeat: no-repeat;
    background-size: 42px 48px;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";
}

.ie6 .arrow-big-right, 
.ie7 .arrow-big-right, 
.ie8 .arrow-big-right {
    background-image: none;
}

The AlphaImage solution sadly didn't totally work for me - I'm getting 2 images now instead of one. I think I'll load a separate stylesheet for lt IE9 and load smaller images. Thanks for the help anyways!! — michaelmcgurk, Sep 27 '12 at 21:54
If anyone else comes across this and is getting two images instead of one, you need to remove the standard background-image. Make sure you're applying your < IE9 styles in a separate file and set background-image: none before applying the MS filters. — Matt McDonald, Apr 20 '13 at 13:16
If using this filter, I found that you can omit the -ms-filter option. Also, the URL should be relative to the HTML page and not the CSS file - I wasted a lot of time getting this to work, because I was doing it relative to CSS! — big_smile, Jul 19 '13 at 10:26
@MattMcDonald you should have written that as am answer - its more than helpful than Josh's post in its own right! But thanks, and up vote to both of you - you really need a separate image going on here just for IE. — itsricky, Mar 02 '14 at 22:57
Thanks for this. Note: This won't work for sprites, unfortunately, but it does handle stand-alone images nicely! — DA., Apr 24 '14 at 07:00

IE8 fix for background-size property? Retina Image

1 Answers1

Linked