responsive design - CSS media Body background image not visible -


i'm maintaining webshop http://www.binkfournituren.nl. stylesheet contains few lines of code responsive behaviour.

part of changes of responsive behaviour footer background image. image set on body tag looks following when opening 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 page on tablet/phone or smaller browser window different image should set on body element. should done instance following css code:

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

the image seems available when inspect body element using chrome browser. can hover on css image link , see image. direct link works: http://www.binkfournituren.nl/catalog/view/theme/shoppest/image/footer-bg-900-green.png

this used work until migrated vps environment. file attributes indicate read , write access folder. current behaviour can reproduced in following browsers:

  • firefox
  • chrome
  • ie 9/10/11
  • safari
  • ipad mini
  • android device

does ie 8 show background image?

do have suggestion on why background images not visible when resizing viewport?

ie8 not support media queries. ignored browser:

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

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -