background size cover IE11 not covering full area

Question

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

@FranciscoCorrales I do, but the thing is, a barebones jsfiddle will not exhibit this issue. As I stated above, the issue seems to be specific to the project I'm working on. But perhaps someone else has experienced the same thing before? — ynamite
i've added two images. hope it helps :) and just to clarify, by background I mean background-image. — ynamite

ynamite ynamite · Accepted Answer · 2014-03-25T14:07:59

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

background size cover IE11 not covering full area

1 Answers