Tecnología y Coaching para Emprendedores

Redimensiona el background usando CSS3

css3

 

El objetivo de este tutorial es aprender diferentes técnicas que nos permitan redimensionar el fondo de página o background, de manera que si modificamos el ancho de ventana, el background se adapte sin problemas al nuevo tamaño de ventana del navegador. En este artículo aprenderemos dos maneras de conseguir que la imagen se adapte al ancho de ventana, usando CSS3.

 

Primer método usando @media screen and (max width: ..px)

Este método ha sido desarrollado por Doug Neiner. En este método usamos una imagen inline img y en el CSS especificamos un min-height del 100%, de modo que la imagen cubra completamente la ventana del navegador a nivel vertical.

A nivel horizontal, especificamos un min-width del ancho de la imagen, de modo que nunca queden lados en blanco a los lados, y en caso que el ancho de ventana del navegador sea inferior al de la imagen, utilizamos como truco una regla de CSS3, en la que especificamos un margin-left igual al min-width multiplicado por -0,50. Así, para un min-width de 1024px, utilizaremos un margin-left de -512px.


img .bg {

   /* especifica las reglas para cubrir la ventana del navegador*/

   min-height:100%;

   min-width:1024px;  /* especificar ancho de la imagen.
                           Aquí suponemos que es 1024px */

   /* especifica las reglas para un correcto escalado de la imagen */

   width:100%;

   height:auto;

   /* especifica la posición */

   position:fixed;

   top:0;

   left:0;

   /* caso  que pantalla tenga un ancho igual o inferior a 1024px */

   @media screen and (max width: 1024px) {

      img .bg {

         left:50%;

         margin-left:-512px;  /* -0.50 x 1024px = -512px */

     }

}

 

Segundo método usando background-size

Otro modo de conseguir que la imagen de fondo se redimensione es gracias a la nueva propiedad de CSS3 llamada background-size. Utilizamos el elemento html, en el que ponemos un background fijo y centrado, y entonces ajustamos su tamaño estableciendo background-size igual a cover.

 



html {

   background:url(images/bg.jpg) no-repeat center center fixed;

   -webkit-background-size:cover; /* navegadores basados en webkit */

   -moz-background-size:cover;  /* Mozilla Firefox */

   -o-background-size:cover;  /*  Opera */

   background-size:cover;

}

 

Este método es más moderno que el anterior, por lo que funciona en menos versiones antiguas de navegadores que el primero. Esto mismo, también se puede hacer usando jQuery, si os interesa, hacérmelo saber y escribo otro artículo sobre cómo redimensionar el background usando esta librería de JavaScript.


Comentarios

  • Guillermo Torres

    Ya puestos en fijarnos en las imagenes de fondo, tambien es conveniente adaptar su tamaño a la resolución del dispositivo.
    He visto mas de una vez, fondos con un ancho real de 1600, en páginas “optimizadas para ipad”

    • CreativaSfera

      Sí, tienes razón, y más hoy en día con todos los dispositivos móviles que hay.

  • Carlos Doral

    Perfecto el resize del fondo, sin perder la proporción.
    Fabuloso Sandra! … como siempre!

  • Enyelber

    Diosssss por fin encuentro un sitio que me ayudara bastante a aprender css… Gracias.

    • Sandra

      de nada Enyelber, me alegro que te guste este blog y sobretodo de que te ayude:-)