Problema en firefox con imagen de fondo adaptable

oi_burle · #1 (**permalink**) 18/03/2011, 10:09

Buenas,
Quiero usar una imagen de fondo en la página, que se adapte al tamaño de la ventana, he usado este script, que me funciona bien con el ie, pero me falla con otros navegadores como el firefox,

Código:

<script language=javascript> 
function ini()    { 
    var elFondo = document.getElementById("fondo").style 
    var myWidth = 0, myHeight = 0;
  
        if( typeof( window.innerWidth ) == 'number' ) {
            //Non-IE
            
            myWidth = window.innerWidth
            myHeight = window.innerHeight
            
  
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
          //IE 6+ in 'standards compliant mode'
            myWidth = document.documentElement.clientWidth
            myHeight = document.documentElement.clientHeight
 
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
            //IE 4 compatible
            myWidth = document.body.clientWidth
            myHeight = document.body.clientHeight
 
        }
//hasta aqui bien para FF

    elFondo.width = myWidth  
    elFondo.height= myHeight
}
</script>

Si saco por pantalla la variable elFondo.width me da 0pt, en cambio si saco myWidth me devuelve el valor correcto.

¿Alguien sabe como realizar esa asignación para que funcione en Firefox?

Saludos y gracias!

Panino5001 · #2 (**permalink**) 18/03/2011, 10:32

No le estás agregando la unidad de medida. Así funciona:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
 
</head> 
 
<body> 
<div id="fondo"></div> 
<script language=javascript>  
function ini()    {  
    var elFondo = document.getElementById("fondo").style  
    var myWidth = 0, myHeight = 0; 
   
        if( typeof( window.innerWidth ) == 'number' ) { 
            //Non-IE 
             
            myWidth = window.innerWidth 
            myHeight = window.innerHeight 
             
   
        } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { 
          //IE 6+ in 'standards compliant mode' 
            myWidth = document.documentElement.clientWidth 
            myHeight = document.documentElement.clientHeight 
  
        } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { 
            //IE 4 compatible 
            myWidth = document.body.clientWidth 
            myHeight = document.body.clientHeight 
  
        } 
//hasta aqui bien para FF 
 
    elFondo.width = myWidth +'px';  
    elFondo.height= myHeight+'px'; 
    alert( elFondo.width) 
} 
ini(); 
</script> 
</body> 
</html>

oi_burle · #3 (**permalink**) 18/03/2011, 11:17

Cita:

Iniciado por Panino5001

No le estás agregando la unidad de medida.
...

Muchas gracias!!

Ya va perfecto.