CODEWITHSUNDEEP
htmlcssasp.net
DEN
DEN

Reputation: 1893

Background-size issue in IE and Google Chrome

I am using background-size on Chrome and found out it is CSS3 which is not supported in old versions of IE. Hence I have gone through some posts and someone recommended to use this filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader

HTML:

<span class="num_blue_small small"><span class="numberText">4</span></span>

CSS:

.num_blue_small
{
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
    src='/images/num_blue_small.png',
    sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
 }

.small
{
    display: inline-block;
    height: 35px;
    width: 35px;
    text-align: center;
    vertical-align: middle;
    line-height: 35px;

}

.numberText
{
    color: White;
}

By implementing the "filter", it works perfectly in IE7; however, it turns invisible in Google Chrome.

If I include background: url(/images/num_blue_ssc.png) no-repeat; in .num_blue_small CSS class, it will work fine in Chrome but IE 7 will show 2 same images with different sizes.

What should I do to get it fixed?

Upvotes: 0

Views: 275

Answers (1)

invernomuto
invernomuto

Reputation: 10211

you could try the background-size polyfill

An IE behavior adding support for background-size to IE8. of Louis Remi

Progressive Enhancement is the mantra I live by. It means "Have fun with CSS3 and don't worry about IE8 users; they'll never notice they're missing out on your gorgeous text-shadows and gradients, anyway".

All was well until I discovered the elegance of background-size: cover; and background-size: contain;. The first one, for instance, allows an image to completely cover a background, without having to send a 1920x1080 background image down the pipes.

Unfortunately, they don't degrade gracefully: websites would likely appear broken to IE8 users

They offer that feature:

  • correct position and size of the background image
  • updated position and size on browser resize
  • updated image, position and size when the background-image is modified

but seems they have some limitation:

  • multiple backgrounds (although the :after trick can still be used)
  • 4 values syntax of background-position
  • any repeat value in background-repeat
  • non-default values of background-[clip/origin/attachment/scroll]
  • resizing the background when the dimensions of the element change

Upvotes: 1

Related Questions