CSS 'background-size' property - Cross-Bro

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

Answer 2

Background will fill selector without scaling

.background-size-cover {
  background: url('+$image_path+') no-repeat center top; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+$image_path+", sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+$image_path+", sizingMethod='scale')";
}

Background will be sized (scaled) to full selector height

.background-size-full-height {
  background: url('+$image_path+') no-repeat center top;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}