CSS media Body background image not visible

Question

I'm maintaining a webshop http://www.binkfournituren.nl. The stylesheet contains a few lines of code for responsive behaviour.

Part of the changes of the responsive behaviour is the footer background image. The image is set on the body tag which looks like the following when initially opening the website full screen:

body{
   margin:0;
   padding:0;
   color:#444;
   font-family:"Georgia",Verdana,Arial,Helvetica,sans-serif;
   min-height:100%;
   background:url(../image/footer-bg-400-Green.png) left bottom repeat-x
}

When viewing the page on a tablet/phone or smaller browser window a different image should be set on the body element. This would should be done for instance with the following css code:

@media only screen and (max-width: 960px)
body {
    background: url(../image/footer-bg-900-Green.png) left bottom repeat-x;
}

The image seems to available when I inspect the body element using the chrome browser. I can than hover over the css image link and actually see the image. The direct link also works: http://www.binkfournituren.nl/catalog/view/theme/shoppest/image/footer-bg-900-Green.png

This used to work until we migrated to VPS environment. The file attributes indicate read and write access to the folder. The current behaviour can be reproduced in the following browsers:

• Firefox
• Chrome
• IE 9/10/11
• Safari
• iPad Mini
• Android device

Does IE 8 show the background image?

Do you have any suggestion on why the background images are not visible when resizing the viewport?

Answer 1

IE8 does not support media queries. So this is ignored by the browser:

@media only screen and (max-width: 960px)
body {
    background: url(../image/footer-bg-900-Green.png) left bottom repeat-x;
}