Sep/097
Como usar correctamente grandes fondos con CSS
Hace poco recibí un comentario pidiendo un tutorial donde se explicara como utilizar grandes fondos en CSS. Justamente esos días estaba desarrollando un theme del que hablaré más adelante en el blog que destacaba por un fondo immenso. En este post, finalmente hablo de las tecnicas para hacer un buen uso de fondos grandes en CSS.
Autor: Jack Bach
Bach es el autor principal de este blog. A los 15 años le dio por hacer un juego en flash y eso le llevó a hacer una web para mostrarlo al mundo. Ahora ya han pasado unos años y ha aprendido sobre todo XHTML y CSS para maquetar sus diseños web.Por lo general hay diferentes problemas a la hora de conseguir nuestro propósito. De estos problemas será de los que nos encargaremos de solucionar en este tutorial.
El fondo se corta
Lo más común es que al hacer nuestro fondo lo demos un buen ancho, pero siempre hay pantallas más grandes. Además, si la hacemos la imagen muy ancha el peso del archivo también augmenta.
El fondo tarda mucho en cargarse
Al utilizar un fondo grande, lo más común va a ser que tenga un peso considerable, y esto hará que la página tarde en cargarse.
Para solucionar estos problemas, por decirlo de alguna manera, hay dos métodos que podemos usar con el fin de tener un fondo extenso en nuestra web y que se visualice bien en todas las pantallas y con todos los navegadores- o al menos con el máximo posible…
Método 1: Enlazar los bordes con un color de fondo llano
Podemos hacer que una imagen de fondo no quede cortada por los lados y por abajo en pantallas de grande resolución ya sea mediante un degradado o finalizandolo elegantemente. He aquí diferentes ejemplos:
El css sería algo tan sencillo como:
body {
padding: 0;
margin: 0;
background: #111 url(bg.jpg) no-repeat center top;
/* Para máxima compatiblidad */
width: 100%;
display: table;
}
Método 2: El doble fondo
En otros casos puede que no queramos que la imagen finalice por muy grande que sea la pantalla. Esto solo será posible cuando utilicemos un motivo de fondo (un pattern). Este motivo puede que queramos que se repita por toda la página o solo a lo horizontal. Veamos unos ejemplos en los que podemos utlizar este método:
Para conseguir un fondo como el de la primera imagen, tenemos que usar un motivo que se extetienda por todo el body. Luego otra imagen para el brillo. Esta segunda imagen es importante que sea *.png para que funcionen las transparencias. El css quedaría así:
body {
padding: 0;
margin: 0;
background: #666 url(bg.jpg) repeat;
/* Para máxima compatiblidad */
width: 100%;
display: table;
}
#contenedor {
padding: 0;
margin: 0;
background: transparent url(bg.jpg) no-repeat top center;
}
Donde #contenedor será el div donde va a estar contenida toda la información.
Para conseguir un fondo como el de la segunda imagen seguimos el mismo procedimiento que para la primera, pero haremos el fondo del body solo se repita horizontalmente:
background: #9BD1FF url(bg.jpg) repeat-x;
Esto es todo por hoy. Espero que os sea útil. Acordaros de seguir este blog en Twitter o al Feed, porque Tinnta se vuelve a poner las pilas!
Nota: Algunas ideas para el artículo las he sacado de WebDesignerWall
20:54 on Septiembre 25th, 2009
Gracias esta bueno. Saludos!
23:05 on Septiembre 25th, 2009
Men te felicito!!
ademas me servirá demasiado estoy aprendiendo xhtml + css :P Chao
23:57 on Septiembre 25th, 2009
Me alegro de que os guste este artículo… Si queréis haré más de este estilo :)
20:39 on Septiembre 27th, 2009
muy bueno :)
22:43 on Noviembre 10th, 2009
muy buen tutorial… gracias por compartir tu conocimiento!
19:21 on Marzo 29th, 2010
Hola a todos, estoy haciendo mi primera web y después de hacer varios cursos por internet, tengo una duda respecto al fondo.
Necesito que mi pagina web tenga las características de la pagina web que os adjunto de muestra, http://motiveco.com.au/
es decir que la imagen se ajuste a la pantalla que tenga cada usuario pero sin deformarse.
Me podríais ayudar?? muchas gracias.
Kas
14:55 on Marzo 30th, 2010
Hola meri!
Para hacer un fondo como el de la página que has enlazado, para empezar necesitas una imagen muuuy grande. Lo ideal para que se vea siempre perfecto sería una de un ancho de 3000px, aunque puedes usar una más pequeña, ya que sino tardará mucho en cargarse. Importante que ocupe poco, no le pongas una calidad demasiado alta.
Luego, simplemente en el css de tu página agregas el fondo del body como te muestro a continuación:
background: [color] url(“[dirección de la imagen]“) no-repeat fixed center 0;
Por ejemplo:
background: #000 url(“images/bg.jpg”) no-repeat fixed center 0;
Suerte!