IE9-11 @media Conflicts

Question

I've recently came across a problem with background images and media queries in IE. What it seems like to me is that IE9 and 10 are conflicting with the media query's background property and causing no image to appear. In IE11 only the "mobile" image appears. I've been at this for about 2 days and am completely stumped.

The only solution I've found for IE9 is to create a conditional statement and use !important. Unfortunately that doesn't work in 10 and 11 (thank you Microsoft). Any help is appreciated. In the meantime I'll continue doing research.

Keep in mind, I've only tested this through netrenderer.com so I'm not 100% sure if the results are accurate.

HTML:

<div style="width: 100%; border: 1px solid #00F;">
    <div class="logo"></div>
</div>

CSS:

    .logo { width: 500px; height: 190px; background: url(desktop.png) no-repeat; }
    @media ( max-width: 400px ) {
        .logo { width: 100%; height: 140px; background: url(mobile.png) no-repeat; }
    }

Answer 1

I tested the following code in IE11 and its modes for IE10 and 9. It works flawlessly.

.logo { width: 500px; height: 190px; background: url(http://placehold.it/600x300) no-repeat; }
@media screen and ( max-width: 400px ) {
    .logo { width: 100%; height: 140px; background: url(http://placehold.it/350x150) no-repeat; }
}

You forgot to add screen in your media query.