Adaptar background a resolución de pantalla
Publicado por Suna (1 intervención) el 21/02/2014 19:42:28
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:
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:
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!
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:
1
2
3
4
5
6
7
8
9
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<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!
Valora esta pregunta
0