JavaScript - Adaptar background a resolución de pantalla

   
Vista:

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:

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Adaptar background a resolución de pantalla

Publicado por bathorz (10 intervenciones) el 22/02/2014 10:27:05
Funciona en Firefox, Opera y Midori, otros no sé.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = function() {
        setInterval('altBg()', 2000);
      };
 
      var img = new Array();
      img.push('../imagenes/1.jpg');
      img.push('../imagenes/2.jpg');
 
      var index = 0;
      function altBg() {
        document.body.style.backgroundImage = 'url(' + img[index % img.length] + ')';
        document.body.style.backgroundSize = "contain";
        document.body.style.backgroundRepeat = "no-repeat";
        document.body.style.backgroundAttachment = "fixed";
        document.body.style.backgroundPosition = "center center";
        index++;
      }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar