CSS 'background-size' property - Cross-Browser Solution?

Question

I have an element that uses this css:

.my-box {
padding-left:50px;
background-image:url('images/img01.png');
background-size:20px;
height:20px;
}

My problem: in browsers like Internet Explorer, the 'background-size' property doesn't work. Is there a solution either through JavaScript, jQuery or CSS to make this work without having to put a physical <img> tag in the markup?

Answer 1

You can use this polyfill. Maybe fill your issue. An IE behavior adding support for background-size: cover; and background-size: contain; to IE8.

How to use it?

Everywhere you use background-size: cover; or background-size: contain; in your CSS, add a reference to this file. backgroundsize.min.htc

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

See here: background-size polyfill github repo and further information