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 pesado, para ellos 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, flick.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) Lo segundo que tienen que hacer es dirigirse a plantilla en blogger, y localizar 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 tengan un blog con fondo blanco en el blog (me refiero al cuerpo del blog: principal y sidebar), el código hexadecimal del blanco es: #FFFFFF. Quedando así:

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

3) Y ahora, insertaremos el fondo con la imagen o pattern escodigo. 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
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;
}

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