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.
Gonzalo Sánchez
Share Button

About Gonzalo Sánchez

Emprendedor lean, Ingeniero civil informático dedicado al desarrollo de una mejor web con ruby on rails. Fanático de los números y las métricas y por sobre todo fundador de en1mes.
10 years ago Diseño, Html5, Tutoriales, , , 4,394
El problema de las n+1 queries en Ruby on RailsRuby Una Apuesta De 212 Millones De Dólares
You Might Also Like
 
 

Leave a Reply