Imágenes de fondo con Background-cover de CSS3

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.

• El Autor
• Últimos Posts

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.

• Boorstin Honest disagreement is often a good sign of progress. - mayo 5, 2021
• ¿Por qué Twitter fue hecho en Ruby on Rails? - abril 15, 2016
• Construyendo una landing page en Ruby on Rails desde cero. - febrero 11, 2016
• Pair programming (de a dos es mejor) - febrero 11, 2016
• Creando un wordpress en hostinger - abril 18, 2015
• Login con facebook en rails 4.1 y 4.2 - febrero 3, 2015
• EL ASSET PATH DE RAILS - enero 26, 2015
• Entendiendo los objetos en Ruby - enero 21, 2015
• La verdadera educación Tecnologica - enero 14, 2015
• Kit Digital del gobierno de Chile - enero 14, 2015