
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.
- ¿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
- ¿Como diseñar un buen Layout para tu página web? - enero 13, 2015
Deja un comentario