Imagen de fondo web adaptable a cualquier resolucion

Actualizado el lunes, 20 junio, 2016

Dar un toque elegante a una pagina es importante, puedes usar una imagen como fondo web, pero no olvides que cada imagen tiene unas proporciones, y que existen pantallas de diversas resoluciones. Para que la imagen no se deforme al cambiar el tamaño de la ventana o la resolución existen varias opciones, cada una de las cuales tiene sus pros y sus contras. Vamos a ver tres opciones: CSS, Javascript y un plugin Jquery.

CSS

Lo mas sencillo, es usar CSS. Y lo haremos con la propiedad background-size y su valor cover, el cual redimensiona automáticamente la imagen al variar el tamaño de la ventana.

html {
    background: url(background.jpg) no-repeat fixed center; (si tienes scrooll o similar, modifica el fixed)
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

El problema de realizar esta operación con CSS, es que no funciona con los navegadores anteriores a IE9. Deberemos usar las otras opciones.

Javascript

Aquí, deberemos de seguir tres sencillos pasos.

##Primer paso, en html:
<body>

<img id="bg" src="/background.jpg"  alt="background" />  
                
</body>
##Segundo paso, en el CSS:
#bg{
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}

##Tercer paso, el javascript:
window.onload = function() {
 
    function bgadj(){
             
        var element = document.getElementById("bg");
         
        var ratio =  element.width / element.height;   
         
        if ((window.innerWidth / window.innerHeight) < ratio){
         
            element.style.width = 'auto';
            element.style.height = '100%';
             
            <! si la imagen es mas ancha que la ventana la centro >
            if (element.width > window.innerWidth){
             
                var ajuste = (window.innerWidth - element.width)/2;
                 
                element.style.left = ajuste+'px';
             
            }
         
        }
        else{  
         
            element.style.width = '100%';
            element.style.height = 'auto';
            element.style.left = '0';
 
        }
         
    }
<! llamo a la función bgadj() por primera vez al terminar de cargar la página >
    bgadj();
    <! vuelvo a llamar a la función  bgadj() al redimensionar la ventana >
    window.onresize = function() {
        bgadj();
 
    }
 
}

Jquery Usaremos este plugin: http://srobbin.com/jquery-plugins/backstretch/
##En nuestro HTML:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/jquery.backstretch.min.js"></script>

##Antes de </body>

<br>
<script>
     
    $(document).ready(function() {
        $.backstretch("background.jpg");
    });
     
</script>

Para cualquiera de las dos ultimas opciones es interesante incluir esta meta:
<meta http-equiv="X-UA-Compatible" content="IE=7,8,9" />

Saca tu conclusión…

 

Agregar comentario