CSS3 1

Imágenes de fondo con Background-cover de CSS3

background-cover

Antes de CSS3 teníamos que recurrir a plugins como backstretch para poner una imagen de fondo en una página web, ahora podemos ocupar la propiedad background-cover, si queremos ponerla en toda la página podemos utilizar el siguiente código:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Ahora claro que no estamos obligados a poner la imagen en todo el sitio, podemos aplicarla a un div o una sección, cambiando la parte de html por el id o clase de la etiqueta(s) respectiva(s).

La gran ventaja de esta solución es que la imagen se adapta al ancho de la pantalla y por lo tanto no afectará a la responsividad de nuestro sitio.

Oh snap! CSS3 e internet explorer no son muy amigos, siempre realiza pruebas en los navegadores de tus clientes objetivos.
Share
October 16, 2014 Diseño, Html5, Tutoriales, , ,