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
Post a Comment