1

I am writing some css that requires background-size: 100% 100%.

Unfortunately, as this is a css3 property, it is un supported in IE8 and below. However, I read about a hack, which I have tried using below:

#submit{
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled='true' 
src='/images/btn.png', sizingMethod='scale'); 

  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( enabled='true' 
src='/images/btn.png', sizingMethod='scale')"; 

  background: url('/images/btn.png') no-repeat;
  background-size: 100% 100%;
}

#submit is the id of a submit button.

Unfortunately, this doesn't seem to be work. Any solutions?

Kara
  • 6,115
  • 16
  • 50
  • 57
F21
  • 32,163
  • 26
  • 99
  • 170

2 Answers2

2
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

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

This would scale it to the size of the whole page. But there is no real deal to ensure that background-size is working in IE. Even the MSDN Documentation tells that.

And btw: this is a possible duplicate of How do I make background-size work in IE?

Community
  • 1
  • 1
mas-designs
  • 7,498
  • 1
  • 31
  • 56
  • I have tried what you posted and it doesn't seem to be working. I actually looked at the question you linked to and started from using the code posted in there. Also forgot to mention that I am trying to apply this to a submit button – F21 Feb 15 '12 at 09:46
  • so you want to add an image to a button or do you want to change the color of a button ? – mas-designs Feb 15 '12 at 09:48
  • The image is used as the background of the button. `background: url('/images/btn.png) no-repeat; background-size: 100% 100%;` Works fine in IE9. The filters however doesn't stretch the background image in IE8 and below – F21 Feb 15 '12 at 09:52
  • yeah thats bad, background-size is supported by IE9 only :( – mas-designs Feb 15 '12 at 09:53
  • Although I find it quite odd that the filters didn't work on the button. I haven't tried using it on anything else though. – F21 Feb 15 '12 at 10:04
0

The best approach is to avoid AlphaImageLoader completely and use gracefully degrading PNG8 instead, which are fine in IE. If you absolutely need AlphaImageLoader, use the underscore hack _filter as to not penalize your IE7+ users. Please check this link for your reference. https://developer.yahoo.com/performance/rules.html#no_filters=

Divek V
  • 1