CODEWITHSUNDEEP
internet-explorercssinternet-explorer-8
Ilja
Ilja

Reputation: 46479

How to make "background-size" work in IE8?

I am building a website for newer browsers, but I want it to look decent in IE8 too. Everything was OK, until I ran into a problem. I found that background-size is not working in IE8. After some research I was able to find some sort of "hack", but it didn't work for me.

Maybe I am doing something wrong; please take a look at this code and maybe suggest a solution that will fix background sizing in IE8, (preferably a CSS solution).

.logo {
    width: 190px;
    height: 204px;
    background-image: url("../img/logo.png");
    background-repeat: no-repeat;
    background-size: 190px 204px;

    /** This is the so called IE8 hack, but it doesn't seem to work **/

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

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

    /** End of Hack */

    position: absolute;
    display: block;
    z-index: 99;
    margin: -73px 0 0 405px;
}

Upvotes: 1

Views: 3490

Answers (2)

Disha Jain
Disha Jain

Reputation: 1

IE8 doesn't supports Background-size property of CSS3. But you can have a look at this link http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx. This may help you.

Upvotes: 0

LeBen
LeBen

Reputation: 2049

The point is Retina screens, right? Since the market share of that kind of screen isn't that big, I would prefer using a "standard" image first and then replace it by a high-resolution if needed.

You can do it with Retina.js for example.

Or you can simply use an image tag instead. It will work on IE8. Don't forget to define the width & height properties.

<a href="/" class="logo">
  <img src="img/logo.png" width="190" height="204" alt="Bryuvers">
</a>

Upvotes: 1

Related Questions