comparte el articulo 

Expansión de una imagen de fondo con CSS

Actualizado el 29/06/2011 < > 11 Cometarios

Resumen: 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.

Publicado el 29/06/2011, última actualización 29/06/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

Añadir Comentario (Subir al texto)

11 Cometarios

  1. marcelo

    Hola, cunado utilizo background-size, no puedo utilizar background-attachment: fixed;

    me pueden orientar.

    Lunes, 10 de octubre 2011

  2. marcelo

    ok, ya lo solucione !!

    body{
    background-image: url(images/fondo.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    }

    Lunes, 10 de octubre 2011

  3. paco

    gracias marcelo, lo de repeat, no me lo cogia de la otra manera el css, pero asi si.

    Miércoles, 19 de junio 2013

  4. Fran

    Hola a todos, un saludo para todos ustedes, con el codigo siguiente:

    body{
    background-image: url(images/fondo.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    }

    Si funcion la expansion de la imagen en todo el fondo de mi sitio pero solo funciona para Chrome y para internet explorer 9.0 no.

    Por favor, que tengo que modificar o configurar para que tambien funcione en Explorer 9, me pueden dejar su respueta aqui en el foro o bien escribanme a mi corre

    estare muy agradecidos con todos ustedes, gracias

    Sábado, 6 de julio 2013

  5. yesenia

    Soy tu fan!!!!

    he buscado por todas partes y no habia logrado tener una imagen de fondo que me abarcara todo,
    1000!! GRACIAS!!

    Me ha funcionado a la perfección.

    entraré más seguido a esta página, tiene mucho contenido muy bueno.

    Like!!!

    Viernes, 24 de enero 2014

  6. Yolanda

    Es genial! con css3 funciona de maravilla.

    Pero me gustaría saber cómo llamar a la imagen de fondo con el método css básico, no lo he conseguido :(

    He probado a insertar una imagen con la etiqueta img y se adapta perfectamente al tamaño del navegador, pero como fondo no he sido capaz de insertarla. Puedes decirme cómo llamar a la imagen de fondo con el css básico?

    Miércoles, 26 de febrero 2014

  7. emmanuel

    sorry pero no entendi el segundo metodo, ¿donde coloco la url de la imagen? o tengo que complementar el primero con el segundo???

    Lunes, 19 de mayo 2014

  8. jose

    grande marce!!! sos un capo.

    Sábado, 25 de octubre 2014

  9. Robert Robles

    Marcelo, muchas gracias. Tu opción fue la mejor y lo solucioné. Eres un duro Man!

    Domingo, 26 de octubre 2014

  10. florencia

    Hola, estoy trabajando con dreamweaver y cree un HTML para enviar por mail, ahora el problema es que cuando lo quiero pegar en un mail el fondo, el cual es una imagen png se borra

    Viernes, 28 de noviembre 2014

  11. Jorge Juan

    Grande, Marcelo!!! Funciona perfecto. Gran contenido y muy bien explicado.

    Sábado, 2 de abril 2016

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras