Quizás estés aburrido del fondo de tu blog y te gustaría darle un toque personal. ¿Qué te parece si le colocas una imagen que a ti te guste de fondo? Pues lo puedes hacer y es muy sencillo, de aquí en adelante te detallaré paso a paso cómo hacerlo.
En primer lugar debes de elegir la imagen que quieras colocar (es conveniente que esté en un formato conocido como jpg, gif, png, etc., para así asegurarte que todos los navegadores la reconozcan y su tamaño no sea muy grande para que no demore demasiado en cargarse).
En este ejemplo la imagen que he elegido es la siguiente:
Ahora dirígete a la sección de diseño de tu blog y puntualmente posiciónate donde se encuentra el código fuente del mismo. Ubica la siguiente propiedad background: (se encuentra dentro de: body{ y normalmente no muy lejos del principio del código).
Ahora debemos de modificar algunos aspectos para lograr una línea similar a la siguiente:
Ahora dirígete a la sección de diseño de tu blog y puntualmente posiciónate donde se encuentra el código fuente del mismo. Ubica la siguiente propiedad background: (se encuentra dentro de: body{ y normalmente no muy lejos del principio del código).
Ahora debemos de modificar algunos aspectos para lograr una línea similar a la siguiente:
1- Lo primero que aparece es el color de fondo de todo el blog, el que puede aparecer en distintos formatos: RGB decimal [ej.: (12,93,23)], RGB hexadecimal (ej.:#33FF00), RGB porcentual [ej.: (23%,55%,0%)] entre otros tantos o también haciendo referencia a un color definido anteriormente ($bgcolor). También se puede definir por el nombre en inglés del color (ej.: blue)Este color lo puedes modificar, pero recuerda que es el color que se verá si la imagen no cubre por completo la pantalla, si esta tiene partes transparentes o si la imagen no se puede cargar. >
2- A continuación debes de colocar la dirección donde se encuentra la imagen, por ej.: url(http://www.direccion.com/image1.jpg). No olvides colocar la extensión de la imagen (ej.: .jpg) porque sino el navegador no la cargará)
3- El tercer paso consiste en definir como quieres que se repita la imagen, por ejemplo "no-repeat" no repite la imagen, colocándola una sola vez en el vértice superior-izquierdo de la ventana del blog. La siguiente imagen muestra los posibles valores a utilizar:
4- Si eliges "no-repeat" ahora es el momento de decir donde quieres que se ubique la imagen, la posición se puede indicar de distintas forma y en distintas unidades (por ejemplo se puede indicar en cm, px, em, ex, porcentajes, etc). En esta ocasión y para no complicar demasiado se utilizarán porcentajes, para esto se debe de saber que la coordenada (0,0) se encuentra en el vértice superior izquierdo de la página por lo tanto en porcentajes esta es la posición (0% 0%). Recuerda que para indicar la posición se establece primero el porcentaje que quieres que se traslade la imagen horizontalmente y luego dejando un espacio el porcentaje que quieres que se traslade verticalmente.La siguiente imagen muestra algunos ejemplos
5- Por último es útil establecer el comportamiento de la imagen. El valor "fixed" hace que la imagen quede fija en la posición establecida y no se deslice al hacer scroll, mientras que si no estableces ningún valor o estableces "scroll" la imagen se desplazará junto con la página.
2- A continuación debes de colocar la dirección donde se encuentra la imagen, por ej.: url(http://www.direccion.com/image1.jpg). No olvides colocar la extensión de la imagen (ej.: .jpg) porque sino el navegador no la cargará)
3- El tercer paso consiste en definir como quieres que se repita la imagen, por ejemplo "no-repeat" no repite la imagen, colocándola una sola vez en el vértice superior-izquierdo de la ventana del blog. La siguiente imagen muestra los posibles valores a utilizar:
4- Si eliges "no-repeat" ahora es el momento de decir donde quieres que se ubique la imagen, la posición se puede indicar de distintas forma y en distintas unidades (por ejemplo se puede indicar en cm, px, em, ex, porcentajes, etc). En esta ocasión y para no complicar demasiado se utilizarán porcentajes, para esto se debe de saber que la coordenada (0,0) se encuentra en el vértice superior izquierdo de la página por lo tanto en porcentajes esta es la posición (0% 0%). Recuerda que para indicar la posición se establece primero el porcentaje que quieres que se traslade la imagen horizontalmente y luego dejando un espacio el porcentaje que quieres que se traslade verticalmente.La siguiente imagen muestra algunos ejemplos
5- Por último es útil establecer el comportamiento de la imagen. El valor "fixed" hace que la imagen quede fija en la posición establecida y no se deslice al hacer scroll, mientras que si no estableces ningún valor o estableces "scroll" la imagen se desplazará junto con la página.
A continuación tienes algunos fondos que puedes utilizar. Sólo debes de elegir el que te guste y el código que debes de colocar para background es el que se encuenta debajo.
Para obtener los códigos de algunos colores RGB lee Código de colores RGB
Si tienes una imagen y no sabes como alojarla en internet y obtener así su url puedes leer: cómo alojar un archivo en internet. Esto es todo ya sabes como cambiar el fondo de tu blog. Recuerda que tienes muchos más cosas en PCZEROS, sigue viaje!
