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!
