Expansión de una imagen de fondo con CSS

En este artículo explicamos dos métodos CSS distintos para expandir la imagen de fondo y tome el tamaño de la ventana del navegador.

Muchas son las ocasiones en las que se nos presenta la necesidad de utilizar una imagen de fondo para nuestro sitio que se encuentre en estado expandido, y de tal manera abarque toda la ventana del navegador, sea cual sea su medidas. El común uso del escritorio como entorno de trabajo y su facilidad de adaptar una imagen al tamaño de la pantalla, hace que nos sea muy familiar el uso de imágenes expandidas de fondo y aunque para adaptarlas en un sitio web no resulte tan sencillo como pueda parecer, el uso de técnicas como las siguientes nos pueden facilitar el trabajo.

Antes de la incorporación de las hojas de estilo a nuestros desarrollos, era bastante complicado lograr esta adaptación de imágenes, se tenía que recurrir a varios trucos para lograr el efecto deseado, e incluso se tenía que personalizar de navegador en navegador, teniendo que recurrir muchas veces al uso de JavaScript.

En la actualidad CSS, y sobre todo CSS3, nos han extendido la mano para llevarnos por un camino de simplicidad y estandarización al realizar esta clase de funciones, permitiéndonos utilizar un mismo código para cada navegador obteniendo resultados exactos o muy similares, con las claras excepciones de los navegadores antiguos que no soportan la tecnología.

Desgraciadamente, debido a estas excepciones mencionadas, CSS3 sigue siendo un tema tabú para muchos desarrolladores, temiendo que usuarios que tengan una versión instalada de Internet Explorer que sea anterior a la 9, no puedan ver correctamente el sitio. Es por esto, que en consideración a los gustos de cada programador, hemos agregado dos métodos distintos para lograr el mismo resultado, explicando en que navegadores funcionará cada uno de ellos.

El objetivo es sencillo, queremos lograr que la imagen de fondo del sitio cubra toda la ventana del navegador, en todo momento, sin que existan espacios en blanco y logrando que la imagen este correctamente escalada, respete su proporción de altura y anchura, no genere barras de desplazamiento y que se encuentre centrada, todo esto utilizando código sencillo sin recurrir a herramientas elegantes, y tratando de que sea visible en la mayoría de los navegadores.

Método con CSS3

La maravilla del uso de CSS3 es que no solo nos convierte en desarrolladores progresivos y vanguardistas, cosa de la que muchos presumen, si no que nos hace ser más pragmáticos y resolver problemas de manera mucho más sencilla.

Gracias al uso de la propiedad “background-size”, el efecto de fondo extendido puede hacerse posible utilizando exclusivamente CSS. Para definirlo, utilizaremos el elemento “html” y dentro de su sentencia de estilo definiremos las propiedades para el ajuste del tamaño de la imagen:

html {
        background: url(imagenes/fondo.png) no-repeat center center fixed;
        background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
}

En dicha sentencia, con la propiedad “background” establecemos un fondo fijo que llevara la imagen cuyo nombre es “fondo.png”, dicha imagen es centrada y arreglada para que no sea repetida. Finalmente mediante la propiedad “background-size”, ya mencionada, ajustamos el tamaño para que cubra la ventana del navegador.

Como se puede observar se utilizaron 3 variaciones de la propiedad, esto es para que la sentencia pueda funcionar en tres distintos navegadores, “moz” para firefox y los derivados del proyecto Mozilla, “webkit” para safari y chrome, y finalmente “o” para Opera.

Esta medida es únicamente de prevención, y con ello nuestro efecto se podrá observar perfectamente en cualquier navegador Firefox que sea igual o superior a la version 3.6, en Safari 3 o superior, Opera 9.5 en adelante, Google Chrome y en la más reciente versión de Internet Explorer, la número 9.

Método con CSS básico

En caso de que CSS3 te resulte complicado, o simplemente quieras tener un mayor rango de navegadores a abarcar podemos utilizar este método que utiliza únicamente CSS básico. Si bien es un poco más de código por programar, resulta más digerible para las versiones antiguas de navegadores, incluidos los famosos Internet Explorer 6 y 7.

En este método utilizamos el elemento “img”, al cual le establecemos una altura mínima con “min-height”, lo que permite llenar la ventana del navegador de manera vertical, después establecemos una anchura (width) de 100% para realizar el llenado horizontal. De igual manera establecemos una anchura mínima (min-width) para que la imagen no se haga más pequeña que su tamaño original.

El truco aquí consiste en verificar si la ventana del navegador es menor que el tamaño verdadero de la imagen, al saberlo podemos utilizar porcentajes y margenes negativos para mantener centrada la imagen sin importar el tamaño de la ventana. Para ello utilizamos una búsqueda de tamaño mediante la sentencia “@media”, esto podemos observarlo en el siguiente código:

img#imagen_de_fondo {
        /* Rellenamos el fondo */
        min-height: 100%;
        min-width: 800px;

        /* Escalamiento proporcional */
        width: 100%;
        height: auto;

        /* Posicionamiento */
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 800px) { /* Hacemos la búsqueda y si coincide modificamos las propiedades de la imagen */
        img#imagen_de_fondo {
                left: 50%;
                margin-left: -400px;   /* Agregamos un margen negativo que represente el 50% */
        }
}

Este método funcionará de manera correcta en cualquier versión de los navegadores Firefox, Chrome, Opera y Safari, por su parte también funcionará a la perfección en Internet Explorer 9, mientras que en las versiones 7 y 8 puede fallar con imágenes muy pequeñas.