Como redimensionar el background usando CSS 3 (via google reader)

La semana pasada publicamos una nota con 38 Texturas y Fondos web gratis con estilo abstracto en donde mencionábamos que los fondos webs están tomando más importancia en los diseños ya que algunos background forman parte de la composición general.

Hoy te traemos un tutorial para que puedas hacer un buen uso de este recurso. En caso de que uses una imagen de fondo, por ej un paisaje, te enseñamos como redimensionar el background usando Css3 para que este se adapte a todas las resoluciones de pantalla.

redimensionar background css3

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

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 nuevo que el anterior por lo tanto puede que NO funcione en todos los navegadores.

Via sandraguerrero.net

original post: http://bit.ly/ei7Hxu

via ifttt
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: