Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE8 fix for background-size property? Retina Image

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

like image 546
michaelmcgurk Avatar asked Sep 27 '12 21:09

michaelmcgurk


People also ask

What property is used to alter the size of a background image?

The background-size CSS property lets you resize the background image of an element, overriding the default behavior of tiling the image at its full size by specifying the width and/or height of the image.

What does background-Size Auto do?

If the background-size is auto or auto auto :If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size. If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.

How do I stretch a background image to the whole page?

When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.


1 Answers

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;
}
like image 53
Josh Davenport-Smith Avatar answered Sep 21 '22 22:09

Josh Davenport-Smith