mmm hasta el momento no he visto ningún código que logre "suponer" algo, siempre es blanco o negro, no hay matices, lo que hace el código original es que obtiene el tamaño real de la pantalla (sobre esto depende como actué el navegador y su respuesta, por lo tanto, la respuesta puede variar de navegador a navegador), después verifica si esta dentro de un rango, al final de cuentas lo que obtienes es un numero, así que es fácil saber si esta dentro del rango de 800 a 1280 (para las 3 resoluciones que en teoría tendrías que tener ya preparadas), si el tamaño de pantalla es meno a 800 o mayor a 1280 llama a una cuarta imagen, que en este caso podríamos llamar genérica para que se muestre en todas las demás resoluciones que no están incluidas en el array, así en caso de que quieras agregar mas resoluciones simplemente tienes que crear las imágenes, agregarlas al array y después ampliar el numero máximo de resolución soportada ( que podria ser 1920x1080 en vez de 1280x1024)
Espero que se entienda lo que realmente hace el código original que publique
Para que te sea mas fácil entender comentaré el código original
Código Javascript
:
Ver originalfunction changeBackground() {
//Creamos un array en el cual estarán las resoluciones para las cuales
//tienes alguna imagen ya preparada
var fondos = {
'800'=>'imagen800.jpg',
'1024'=>'imagen1024.jpg',
'1280'=>'imagen1280.jpg',
//Al final, agregamos una imagen mas para utilizarla cuando el usuario que visita
//la página tiene alguna resolución diferente a 800x600,1024x768 o 1280x1024
'default'=>'imagenparaotrasresoluciones.jpg'
}
//Ahora, obtenemos el ancho de la ventana
var ancho = screen.width;
//Verificamos que este dentro del rango, como vez, es fácil saber si la resolución del visitante
//esta dentro del rango que previamente preparamos, ya que solo puede existir 3 coincidencias dentro del rango
if (parseInt(ancho) >= parseInt(800) && parseInt(ancho) <= parseInt(1280)) {
//si esta dentro del rango, entonces quiere decir que existe una imagen para dicha resolución
document.body.style.backgroundImage= "url("+ fondos[ancho] +");";
}else {
//Si el ancho de ventana no entra en el rango quiere decir que no tenemos ninguna imagen preparada, así que
//vamos a utilizar una imagen genérica para que las demás resoluciones no se queden sin una imagen de fondo
document.body.style.backgroundImage= "url("+ fondos['default'] +");";
}
}