Cómo poner imagen de fondo en Blogger

Algunas personas me han preguntado cómo he logrado poner una imagen de fondo en Nestavista.com, un blog que utiliza Blogger como plataforma. Pues el proceso es realmente fácil y a continuación paso a explicar.

Primero algunos puntos a tomar en cuenta:
Recuerden que la imagen de fondo debe ser pequeña ya que esto hará que cargue rápido y que además no se vuelva tan pesado. Para ello, casi siempre se utilizan backgrounds especiales conocidos como "patterns", imágenes que se pueden repetir a lo largo del eje vertical como horizontal formando una sola imagen uniforme.

Para ello, yo ya hace un tiempo publiqué un post con algunos buenos sitios donde descargar patterns. Luego, tendremos que subirla en cualquier servicio de hospedaje como: imageshack.us, photobucket.com, flickr.com, etc., de tal manera que puedan obtener la URL de la imagen.

Ahora sí vamos con los pasos a seguir:

1) Primero, sacaremos un backup de nuestra plantilla, dirigiéndonos a Diseño->Editar HTML->Descargar plantilla completa.

2) Ahora, insertaremos el fondo con la imagen o pattern escogido. Para ello localizaremos esta parte del código en nuestra plantilla:


body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font -size/* */:/**/small;
font -size: /**/small;
text-align: center;
}


y añadimos la url de la imagen quedando así:


body {
background:$bgcolor
background-image:url(http://img107.imageshack.us/img107/3635/pat3ud0.jpg);
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font -size/* */:/**/small;
font -size: /**/small;
text-align: center;
}


Ahora, donde ven http://img107.imageshack.us/img107/3635/pat3ud0.jpg); deberán reemplazarlo por la URL de tu imagen.

3) Como verán, TODO su blog se ha quedado con el fondo de la imagen escogida, no dejando ver el texto de sus artículos (posts). Por ello, lo que haremos es dejarlo en blanco (o en el color que ustedes deseen) para que pueda distinguirse su texto. Entonces nos dirigimos a nuestra plantilla en blogger, y localizamos esta parte del código:


#outer-wrapper {


Luego, añadiremos un "background" con un color cualquiera pero en hexadecimal. Si no sabes cuál es el valor hexadecimal de cada color, pues esta herramienta te ayudará: Conversión de Colores a hexadecimal.

Para quienes hayan tenido un blog con fondo blanco en la parte principal de su blog, el código hexadecimal del blanco será: #FFFFFF. Quedando así:


#outer-wrapper {
background: #FFFFFF;
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}


Y eso es todo, guardamos los cambios y vemos los resultados.

[post_ad]