Cambiar el fondo principal.

A través de vuestras preguntas voy detectando que cosas que 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 (ver tablas de colores por gentileza de Ciudad Blogger).

Como se ha anticipado, esto lo ponemos en el selector body (amén de otros atributos comunes que necesiteis 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 entendeis 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 podeis ver en Decora tu blog, dónde además hay varios modelos para descargaros. 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 facilitaros 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 teneis 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 podeis encontrar por doquier en internet, pero si sois un poco mañosos con algún editor de imágenes, también podeis crearlo vosotros 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. Si escribimos repeat, conseguimos exactamente lo mismo...

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;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter