• Inspiración
  • Tutoriales
  • Talleres
    • Bootcamp de Desafio Latam, conviértete en desarrollador web
  • Oportunidades de trabajo

En1Mes

  • Talleres presenciales de rails
  • Bootcamp de programación

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.
Oct 16, 2014Gonzalo Sánchez
Share Button
  • 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
7 years ago Diseño, Html5, TutorialesCSS3, Diseño, diseño responsivo, html53,691
El problema de las n+1 queries en Ruby on RailsRuby Una Apuesta De 212 Millones De Dólares
You Might Also Like
 
El diseño web se ha comoditizado
 
HTML5 es mucho más que un Doctype!

Deja un comentario Cancelar respuesta

Últimos Tweets

Authentication failed! Please check your Twitter app data.
Tags
Ruby on Railsemprendimientos digitalesTutorialesDiseñoHerramientashtml5WordpressrubyLanding PageBases de datosTallereshackathonInspiraciónTipsNitrousHerokuPáginas WebphpCSSsmartphonesRailsGirlsEventosemprendimientos socialeslenguajes de programaciónJavascriptHostingEducaciónGemasprogramaciónCreatividadMySQLemprendimientosCitas inspiradorasExperimentosBenchmarksdiseño responsivoFrameworksInspector de ElementosTwitterlean startupredes socialestecnologíaHackatonUsabilidadmetodologías
Interesado en otros tipos de emprendimiento?

Quieres aprender a importar y exportar productos a todo el mundo? entra aquí

No te pierdas ningún artículo.

2016 © En 1 Mes