2

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?

Jason Lipo
  • 751
  • 2
  • 11
  • 24
  • background-size: cover; :) – Vikas Ghodke Aug 26 '13 at 15:04
  • But I don't want the img01.png to cover the contents of the box. I want it to be 20px in size in my box. The 'background-size' property doesn't work at all in Internet Explorer. – Jason Lipo Aug 26 '13 at 15:07
  • possible duplicate of [How do I make background-size work in IE?](http://stackoverflow.com/questions/2991623/how-do-i-make-background-size-work-in-ie) – cimmanon Aug 26 '13 at 15:27

2 Answers2

3

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%;
}
Tim Kozak
  • 4,026
  • 39
  • 44
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

Vahid Hallaji
  • 7,159
  • 5
  • 42
  • 51