Problema adaptar background a resolución de pantalla

[stuxsys]

Hola! permiso, a ver si alguien puede ayudarme con esto:

Tengo un sitio web en html/css simple, cuya imagen de fondo aparece extendida y adaptada correctamente a la resolución del visitante, que es justamente lo que necesito. Esto lo logre con css:

body,html {
background-color: #000;
background:url(jpg/imagen1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Ahora, cual es el problema? tengo una función en javascript para que la imagen de fondo cambie cada 15seg... y que es lo que pasa cuando cambia? pues no me aparece adaptada a la resolución de pantalla y como si fuera poco me aparece sobre la otra imagen de fondo.

La función es la siguiente:


<script type="text/javascript">
img = new Array();
img.push('jpg/bebe.jpg');
img.push('jpg/sarten.jpg');
img.push('jpg/rayo_verde.jpg');
img.push('jpg/cocina.jpg');
img.push('jpg/consultorio.jpg');
img.push('jpg/espalda.jpg');
img.push('jpg/mama.jpg');

index = 0;
function altBg(){
document.body.style.backgroundImage = 'url(' + img[index % img.length] + ')';
document.body.style.webkitBackgroundSize = "cover";
document.body.style.backgroundRepeat ="no-repeat";
document.body.style.backgroundAttachment="fixed";
document.body.style.backgroundPosition ="center center";

index++;
}
window.onload = function(){
setInterval('altBg()', 15000);
// 5000 milisegundos equivalente a 5 segundos;
};
</script>



Como verán le agregué varios estilos para lograr lo mismo que logré con css pero no hay caso, en lugar de cambiar la imagen de fondo y adaptarse a la resolución de pantalla, aparece otra imagen por encima y no se extiende, no se adapta a la resolución.

Espero haber sido claro, muchas gracias de ante mano y espero que alguien me pueda ayudar!

[Alexis88]

Probé tu algoritmo y no sucedió lo de la superposición de imágenes, pero como dices, no se adaptaban a la resolución. Elaboré un algoritmo alternativo basado en un plugin que hice hace un tiempo, lo probé en Chrome, Firefox, Opera y Safari (no tengo el IE) y hasta en el Opera Mobile del smartphone y va muy bien, aquí te lo dejo:

Código Javascript:

var img = ['imagen1.jpg', 'imagen2.jpg', 'imagen3.jpg', 'imagen4.jpg', 'imagen5.jpg'],
    total = img.length,
    index = 0;
 
document.body.style.background = "url('" + img[index] + "') no-repeat center center fixed";
document.body.style.backgroundSize = "cover";
 
var fondo = {
    rotar: function(){
        index = index == total - 1 ? 0 : ++index;
        document.body.style.background = "url('" + img[index] + "') no-repeat center center fixed";
        document.body.style.backgroundSize = "cover";
    }
};
 
setInterval(fondo.rotar, 15000);
 

Como podrás notar, cada vez que se ejecuta la función que realiza el cambio de imagen, verifico el valor del índice, si es igual a la posición de la última imagen en el array, le doy cero como valor para que la rotación se produzca desde la primera imagen, creando así un bucle infinito, pero si el valor del índice aún no alcanza a la última posición del array, aumenta en uno, mostrando así la siguiente imagen.

DEMO

Saludos

[stuxsys]

MUCHAS GRACIAS!!!

Me funcionó perfectamente, GRACIAS!!!

[Alexis88]

Le añadí una transición para que el cambio del fondo se vea más estético.

Código Javascript:

var img = ['imagen1.jpg', 'imagen2.jpg', 'imagen3.jpg', 'imagen4.jpg', 'imagen5.jpg'],
    total = img.length,
    index = 0;
 
document.body.style.background = "url('" + img[index] + "') no-repeat center center fixed";
document.body.style.backgroundSize = "cover";
document.body.style.transition = "background .8s";
 
var fondo = {
    rotar: function(){
        index = index == total - 1 ? 0 : ++index;
        document.body.style.background = "url('" + img[index] + "') no-repeat center center fixed";
        document.body.style.backgroundSize = "cover";
        document.body.style.transition = "background .8s";
    }
};
 
setInterval(fondo.rotar, 15000);
 

Ahora mira cómo se ve: DEMO

No olvides marcar el tema como solucionado para que otras personas que tengan el problema que inicialmente tuviste, sepan que aquí pueden encontrar una solución.

Saludos