Ie Background Size Not Working

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;

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.

IE background size not working

since background-size is CSS3 specific your gonna have to use something like this for it to work in IE

set your html and body to

html {overflow-y:hidden}
body {overflow-y:auto}

wrap the image you want fullscreened with a div #page-background

#page-background {position:absolute; z-index:-1}

then put this in your html file

<div id="page-background">
  <img src="/path/to/your/image" width="100%" height="100%">
</div>

** you will have to use some sort of reset to remove the margins and paddings, something like this

html, body {height:100%; margin:0; padding:0;}

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)...

background size cover IE11 not covering full area

I've managed to fix the issue by applying the following CSS. I'm not a 100% happy with it, but it'll have to do.

If anyone runs into the same issue, test this fix, it may work depending on your scenario, maybe it won't.

.bg {
    ...
    background-size: 100% 100%;
}

Holy crab-shoe on a stick ... well, this is kinda embarrassing.

The problem was: IE was zoomed out.

The solution: zoom in.

The CSS was working fine all along.

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

Background size not working from common class is it needs any workaround

Here is a stripped down example to fix your issue. The problem is with using the background property under a more specific selector. background sets the background-size property to it's default when you don't specify a value for it.

Changing your specific icons to use background-image and background-repeat directly fixes this.

div.icon-holder {
  width: 150px;
  height: 150px;
  border: 1px dashed;
}

div.icon {
    padding: 75px;
    background-size: contain;
}

div.icon.blue {
  background-repeat: no-repeat;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Lightblue.svg/900px-Lightblue.svg.png);
}

<div class="icon-holder">
  <div class="icon blue"></div>
</div>

---

Related Topics