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.
Post Anterior:
