Cambiar el fondo principal de tu Blog

A través de sus preguntas voy detectando que cosas se suponen fáciles, para muchos no lo son tanto, así que seguiremos engrosando el contenido de la etiqueta BPT.

En esta ocasión es el turno de ver cómo cambiar el fondo de un blog, que para todos los casos que se explican, requiere modificar nuestro selector CSS llamado body.

En primer lugar tenemos que escoger qué tipo de fondo queremos. Un fondo puede ser un color plano o cualquier otro tipo de imagen. Con lo primero no hay mayor problema, porque se trata de indicar un color en código hexadecimal y nuestro fondo se verá por completo de ese color.

Como se ha anticipado, esto lo ponemos en el selector body (otros atributos comunes que necesites para todo el blog) mediante la propiedad background. Si ya tenemos definido un background, simplemente cambiamos su contenido. Sin miedo. Podemos ver los resultados con Vista Previa antes de grabar los cambios de manera definitiva.
body {
background:#990000;
}
Con las imágenes tampoco hay demasiado problema, pero existen varios sistemas distintos. Comenzamos con el de colocar una imagen grande que ocupe todo el espacio visual del navegador y que no se mueva al hacer scroll.

Tanto en este caso como en los restantes, necesitaremos escoger la imagen que nos guste y lo que es más importante, un lugar dónde alojarla para luego poderla utilizar. Sobre esto último, para Blogger lo mejor es alojarla en Picasa (Blogger a fin de cuentas), aunque también se puede subir a un post sin publicar (borrador) que bien podríamos usar también para otras imágenes que vayamos necesitando alojar en algún sitio en el futuro. Una vez alojada, lo que copiamos es su URL o dirección.

Para la imagen fija de fondo, el código sería.
body {
background: url("http://dirección_imagen") center no-repeat fixed #ffffff;
}
Si entiendes inglés, los atributos son prácticamente autoexplicativos: center para centrar la imagen, no-repeat para que no se repita y fixed para que se quede fija. El último código hexadecimal es optativo y sólo será visible mientras se carga la imagen o en los espacios dónde esta pudiera ser transparente (formatos .gif y .png).

Un ejemplo de cómo quedan este tipo de fondos, lo puedes ver en Decora tu blog, dónde además hay varios modelos para descargar. Usando este sistema, puede ser necesario eliminar el fondo de las entradas u otros elementos, o incluso cambiar el ancho de vuestra plantilla. En la página del enlace, para ajustar el blog a sus diseños y por facilitarnos la tarea, proponen cambiar la plantilla a una Mínima y así se hacen ambas cosas de una tacada.

Esta forma de montar un fondo es viable y a veces necesaria para montar la cosa a nuestro gusto, pero presenta algunos inconvenientes que tienes que conocer:
la imagen tendrá un peso considerable y demorará la carga de la página
el ancho para cada usuario es imprevisible (dependerá de cómo tenga ajustada cada uno su resolución), por lo que en resoluciones pequeñas se cortarán los laterales de nuestra imagen y en las grandes se podrían quedar huérfanos.
para solucionar esto último el ancho de la imagen tendrá que ser realmente grande (más de 1200px-1500px), incrementando el problema del primer punto.

Una posible mejora sería prescindir de una gran imagen y usar otra igualmente ancha, pero menos alta. Esta imagen la repetiremos verticalmente con un repeat-y. Para que todo vaya bien, es necesario que la parte superior de la imagen case con la parte inferior, al modo en que lo hace una baldosa con otra.

Fondos de este tipo puedes encontrar por doquier en internet, pero si conoces algún editor de imágenes, también puedes crearlo nosotros mismos partiendo de cualquier otra imagen, aunque no estuviera expresamente destinada a fondo.

El código en este caso cambiaría sólo en cuanto al atributo de repetición:
body {
background: url("http://dirección_imagen") center repeat-y fixed #ffffff;
}
Para usar imágenes todavía más pequeñas en cuanto a peso, ya nos conviene reducir sustancialmente el ancho (100, 200, 300px...) y conseguir una imagen que case tanto arriba-abajo como izquierda-derecha, ya que lo que vamos a hacer es teselar por completo el fondo.

Para ello y comparativamente con los casos anteriores, sólo necesitamos quitar el atributo de repetición. Repetir tanto en vertical como en horizontal, es lo que hace la propiedad background por defecto, es decir, cuando no tiene atributo alguno al respecto.
body {
background: url("http://dirección_imagen") center fixed #ffffff;
}
Y por fin, el caso más usual. que el fondo se mueva al tiempo que el resto de la página. Para esto eliminaremos en cualquiera de las dos últimas variantes (repetición vertical, repetición en ambos sentidos) el atributo fixed. En la primera (sin repetición), al utilizar una sola imagen, si esta no estuviera fijada, al hacer scroll pasariamos a ver lo que hay debajo de dicha imagen; es decir, nada. o en el ejemplo, un fondo completamente blanco (#ffffff). Por tanto, en el caso de una sola imagen para todo el fondo, sin repetir, deberemos usar siempre fixed.
body {
background: url("http://dirección_imagen") center repeat-y #ffffff;
}
body {
background: url("http://dirección_imagen") center #ffffff;
}
Fuente: oloblogger

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika