Fondos para el blog o Página Web

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:
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.

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!

Comentarios

  1. que buen post.... me ayudo mucho¡¡¡ lo unico que kisiera saber... es como puedo hacer para que la imagen... que elegi.. sea una sola en todo mi blog.. elegi el no repeat y puse al maximo la imagen pero no funciona..

    a ver si me pegas una ayudadita ps.
    felicitacions
    eres lo maximo explicando
    besos

    ResponderEliminar
  2. Evicita: para colocar una imagen sola para todo el blog debes de conseguir una imagen del ancho del blog y elegir no-repeat y 50% 0% para centrarla. Si no modificaste el ancho del blog anda por los 660 u 800px, pero lo puedes encontrar el el código fuente del blog.
    Sólo recuerda no colocar una imagen muy pesada pues si lo haces demorará mucho en cargarse, hasta 100kb es aceptable.
    Espero que te haya servido la ayuda.
    Salu2!

    ResponderEliminar
  3. de gran ayuda ya pude acomodar mi fondo gracias !!!!

    ResponderEliminar
  4. Hola necesito ayuda!!! No puedo acomodar la imagen de la cabecera, ya q me keda en toda la pagina, y yo solamente kiero mi imagen, en el tamaño q esta en este blog mitaichi.blogspot.com te doy ese blog para q tengas una idea de como me gustaria q me kede mi imagen.... te agradeceria muchisimo si pudieras ayudarme, ya q soy nuevo en esto.

    ResponderEliminar
  5. Carlos Abrahan, soy José Antonio del blog "Mi Tai Chi" (mitaichi.blogspot.com). Ponte en contacto conmigo y te digo cómo hacerlo. Un abrazo.

    ResponderEliminar
  6. Dentro de un Instituto que participo, me tocó el papel de confeccionar el Blog.
    No sabes, lo facil que me lo haces!
    Gracias y saludos!

    ResponderEliminar
  7. hola, muy bueno su tutorial, tengo un problema, la imagen que puso en mi blog esta tapada con las entradas, yo quisiera que aparezca en las entradas que agrego , por favor.. espero su respuesta..
    www.bunnycueva.tk

    saludos

    ResponderEliminar
  8. yo tengo esto y quisiera colocar una imagen jpg pero no entiendo eso del url o https pues mi imagen es flor.jpg y nada mas como inserto la imagen a mi blog?

    body {
    margin:0px;
    padding:0px;
    background:$bgcolor;
    color:$textcolor;
    font-size: small;
    }

    ResponderEliminar
  9. zeluby: Me alegro haber podido ayudarte.
    CarlosAbrahan: Talvés Jose Antoño ya te ayudo, pero si te sale en toda la página el problema pudo haber estado en que no elegiste no-repeat como explique en el paso 3
    José Antonio: Qué fácil es si todos nos ayudamos!
    Anómimo: Qué bueno poder ayudarte!
    Keilyn111: El fondo de las entradas es un tema aparte, lo tendré en cuenta para próximos post!
    isisfilm: la url es donde está la imagen que quieres subir, dede de estar en algún alojamiento web de internt. En breve publico un tutorial que lo explique con mayor detalle.

    Gracias a todos por los comentarios!

    ResponderEliminar
  10. Vanessa: Vas a Diseño y luego a Edición html. Todo desde ahí.
    Saludos!

    ResponderEliminar
  11. se te agradece con el alma..-.-u

    ResponderEliminar
  12. Hola muy buen post, me sirvió de mucho pero tengo una duda. Mira, puse todo lo que pusiste, pero el "scroll" no me funciona, solo queda la imagen quieta y nada mas, ya verifiqué todo el codigo y no es nada de eso. Alguna solucion?

    background: url(http://img535.imageshack.us/img535/3460/42212495.jpg)no-repeat 50% 0% scroll;
    }

    ResponderEliminar
  13. HOLA,DECIRTE K YO INSTALE UN FONDO K TENIAS DE NAVIDAD,,Y AHORA K KIERO CAMBIARLO NO M DEJA :(,,M SIGUE SALIENDO D TODAS TODAS ESE FONDO,,Y NO SE YA K HACER PARA PODER CAMBIARLO YA K ESTOY HACIENDO D TODO Y SIGUE SIN DEJARME :(

    ResponderEliminar

Publicar un comentario

Antes que nada quisiera agradecete por la visita y por comentar en el blog!

También te quiero comentar que no tengo mucho tiempo para responder todos los comentarios inmediatamente pero siempre los contesto.

Saludos.

Nosotros somos pczeros... ¿Y tú?