background size cover IE11 not covering full area

css internet-explorer-11 background-size
ynamite picture ynamite · Mar 24, 2014 · Viewed 7.3k times · Source

I'm going bonkers. IE11 refuses to fill the entire area of a DIV with a background image, even though I've set the background-size property to cover. Consider the following example:

CSS:

.bg {
    width: 100%;
    min-height: 220px;
    background: url("bg.jpg") center top no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

HTML:

<div class="bg">bla</div>
<div class="bg">blabla<br />blabla</div>

Chrome, Firefox, Safari, Opera all do what I expect to happen: the background image, bg.jpg, is always covering the full visible area of the DIVs, no matter what the proportions of the browser window are.

IE11 on the other hand does not, instead there are visible gaps (in my case) on the left and right hand side of the DIVs. When I disable the "background-attachment: fixed" rule, it works and the background image covers the whole area. With fixed, it does not. sadface.

It is DEFINITELY a problem specific to the website I'm working on, as I know IE11 usually has no problem with this, but I cannot see anything that would cause this. It's making my brain hurt. I'd love to post a link to said website, but I can't. If you need further examples or have questions, please don't hesitate to ask.

Any help/suggestions are highly appreciated. Thanks!

UPDATE: actually, it seems background-size: cover is ignored totally by IE11 when background-attachment is set to fixed. sigh.

UPDATE 2: some screenshots that (hopefully) illustrate the problem somewhat. In IE the background appears to be fixed, but not covering the area that it should.

FF and IE side by side same image with guides

Answer

ynamite picture ynamite · Mar 25, 2014

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.

Related questions

IE11 not supporting background-size out of proportions

I'm trying to get at background .jpeg figure to auto scale to the height the DIV (lineholder), regardless of the number of child DIV's (linkholder) - and at the same time having some text align vertical inside the parent DIV. …

Read More
How to write a CSS hack for IE 11?

How can I hack or write css only for IE 11? I have a website that looks bad in IE 11.I just search here and there but didnt find any solution yet. Is there any css selector?

Read More
CSS Grid Layout not working in IE11 even with prefixes

I'm using following HTML markup for my grid. <section class="grid"> <article class="grid-item width-2x height-2x">....</article> <article class="grid-item">....</article> <article class="grid-item">....</article&…

Read More