根据屏幕分辨率更改背景图像

Question

Well i do have the below query which is working fine without any problem. it is changing the background-image when i open it in explorer. and when i change the resolution it does not change the background-image automatically i need to refresh the page to change the background image. i want to change it immediately when i change the screen resolution.

Please help....

<script type="text/javascript">
document.onload=pickIt()
function pickIt()
{
    var w=screen.width
    var h=screen.height
    if(w==1440&&h==900)
    {
    //alert("1440x900");
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1440x900.png')";
    }
    else if(w==1280&&h==800)
    {
    //alert("1280x800")
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
    } else if(w==1280&&h==768)
    {
    //alert("1280x768")
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
    } else if(w==1280&&h==720)
    {
    //alert("1280x720")
    document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
    }
}
</script>

Answer 1

为什么不简单地执行document.getElementsByTagName('body')[0].onresize=pickIt吗？

Answer 2

You can use media queries for this. compatibility is still not the best, but it is growing: http://caniuse.com/#feat=css-mediaqueries

@media (max-width: 1200px) and (max-height:600px) {
    html {
        background: url(http://lorempixel.com/1200/600);
    }
}
@media (max-width: 900px) and (max-height:500px) {
    html {
        background: url(http://lorempixel.com/900/500);
    }
}
@media (max-width: 700px) and (max-height:500px) {
    html {
        background: url(http://lorempixel.com/700/500);
    }
}
@media (max-width: 500px) and (max-height:300px) {
    html {
        background: url(http://lorempixel.com/500/300);
    }
}

Demo: http://jsfiddle.net/32X57/