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);
}
}