How to Make Background-Size Work in Ie

How do I make background-size work in IE?

A bit late, but this could also be useful. There is an IE filter, for IE 5.5+, which you can apply:

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

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

However, this scales the entire image to fit in the allocated area, so if you're using a sprite, this may cause issues.

Specification: AlphaImageLoader Filter @microsoft

How do I make background-size work in IE8?

This question got answered intensively here:

How do I make background-size work in IE?

The most popular fix is this background-size polyfill:

https://github.com/louisremi/background-size-polyfill

background-size not working in IE

background-size is a CSS3 property which isn't supported on IE8 and below.

You can also try this:

background:url(../siteImages/top_bar.png) 0 0 / auto 43px repeat-x fixed;

CCS3 background-size:cover not working in IE

I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :

http://codepen.io/anon/pen/oXmzLL?editors=010

Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).

Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...

IE11 wont background-size: cover

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

fixed the issue.
Code would work on local machine,jfiddle and codepen but when uploading the site the above code needed to be added to display correctly.

---

Related Topics