Imagen de fondo en todas las entradas de tu blog


¿Cómo poner una imagen de fondo en las entradas de blogger? Si te lo has preguntado o crees que te lo vas a preguntar alguna vez, presta atención a esta entrada.

Para poner una imagen de fondo que aparezca en todas las entradas de tu blogspot, haz lo siguiente:

1) Vamos a Diseño
2) Edición de HTML
3) Busca en tu plantilla #main-wrapper (teclea Ctrl + F para buscar más rápido).
4) Justo debajo pega el siguiente código:


Código a copiar/pegarbackground: url(http://www...jpg) repeat-y;

En el enlace de color rojo debes poner la dirección de la imagen que siempre quieres que aparezca como fondo en las entradas.

Dependiendo de tu plantilla y de la fotografía que elijas, tendrás que añadir un margen. Para ello emplearemos el valor padding. Para especificar en dónde queremos que comience el margen añadiremos a padding lo siguiente:

-left (marge a la izquierda)
-right (margen a la derecha)
-top (margen arriba)
-bottom (margen abajo)

Por ejemplo, si necesitamos un margen a la izquierda sería así:


Código de ejemplobackground: url(http://www...jpg) repeat-y;
padding-left:70px;

Tendremos que cambiar el valor 70px por el valor que necesitemos para que se vea correctamente.

5) Antes de guardar nada, clica en vista previa, y si todo está bien guarda tu plantilla.

Mira un ejemplo:



Si te fijas, el margen (padding) está aplicado a la izquierda para que el texto quede correctamente centrado.


También puedes poner una imagen de fondo sólo en una entrada en concreto

16 comentarios:

  1. Hola Juan!
    Felicidades por el blog/web y gracias por los trucos.
    La verdad es que está creciendo vertiginosamente.
    Una vez más nuestra enhorabuena ;)!
    Saludos y nos vemos!

    ResponderEliminar
  2. Lo he estrenado en tres entradas, pero la imagen de fondo no me convence mucho, la que realmente me gusta pero no encuentro es la del cuaderno que has utilizado tú... please... de regalo de Navidad? Un abrazo.
    P.D. Bonitos los cambios en el blog: el fondo y la imagen flotante.

    ResponderEliminar
  3. Perdón, el que he estrenado es el que pones al final de la entrada, no éste, pero me ha quedado igual de bien.

    ResponderEliminar
  4. @Muchas Germán y Javier (Trucoteca). Es un orgullo para mí que os guste este blog. Muchas gracias por vuestra visita y por vuestro comentario. Un saludo :)

    @Ángeles. Jejeje. Vale te haré el regalo. Aquí tienes el enlace de la imagen: http://img121.imageshack.us/img121/1583/notebook2f.jpg Sólo tendrás que seguir los pasos de esta entrada para ponerlo. Respecto a lo que comentas que has empleado la otra entrada, el inconveniente es que tendrás que ponerlo cada vez en cada entrada. Todo depende de lo que pretendas. Saludos :)

    ResponderEliminar
  5. Muchísimas gracias, Juan, ya he puesto la imagen en más entradas y me parece que queda muy bonita.
    Enhorabuena por el éxito que está teniendo esta página y el concurso. Un abrazo.

    ResponderEliminar
  6. Hola Ángeles. Te ha quedado fabuloso, me quito el sombrero, de verdad. Te ha quedado un blog muy bueno y personalizado, si todo lo has aprendido gracias a mi blog es un orgullo para mí. Gracias por tus palabras. Saludos :D

    ResponderEliminar
  7. Hola,he conocido esta pagina navegando por internet y realmente me ha encantado.La he añadido a mi favoritos y a mi blog.Tengo un blog de cocina desde hace tiempo,pero estoy pez en cuestion de ir dandole cambios.Por ejemplo en ponerle las fotos en el slide ,soy incapaz,en cambiarle la musica,por mas que lo intento nada.Lo veo muy soso y no me gusta y espero que cn esta pagina pueda ir haciendolo,aunq estoy realmente pez.Enhorabuena por esta pagina.

    ResponderEliminar
  8. Hola Evelys, bienvenida al blog y muchísimas gracias por añadirme a tus favoritos y a tu blog, es un placer. Te animo a que eches un vistazo a todas las entradas (arriba debajo del título tienes un Índice) y si tienes dudas estaré encantado de ayudarte, pero siempre respetando las normas para comentar. Muchas gracias y un saludo ;)

    ResponderEliminar
  9. Esto mismo lo puedo hacer para las sidebars?

    ResponderEliminar
  10. Hola sable. Sí que puedes, pero en lugar de hacerlo con #main-wrapper debes hacerlo con #sidebar-wrapper.

    Saludos

    ResponderEliminar
  11. Estimado, no se por que pero me tira un error de XML cuando trato de ver la vista previa y como no tengo idea que puede estar mal... la imagen itenté con esta mantendiendo los 70pixeles del ejemplo: http://img41.imageshack.us/img41/4906/border4q.gif
    Gelpp!!

    ResponderEliminar
  12. master mi blog es de tres columnas pero cuando coloco la foto ocupa todo lo de almedio sidebar son de 200 y almedio es 425 ayudame por fa

    ResponderEliminar
  13. muy bueno el truco pero cuando ingreso la iagen queda bien pero me ocupa todo el #main-wrapper hasta abajo del blog y solo quero las entras por favor ayudae gracias

    ResponderEliminar
  14. amigo kisiera saber si se puede cambiar de imagen de fondo de cada paguina creada x el blog.
    pork tengo 10 paguinas y no kiero tener la misma inagen de fondo en las 10. solo kisiera k me respeondieras si se puende y si es mucho pedir me dirias como? ai dejame el la respuesta en el blog xfa se agradese ^^

    ResponderEliminar
  15. Hola, recién empiezo en esto de los blogs y el tuyo es buenísimo.

    Ahora, mi duda, no me aparece el #main-wrapper ¿que puedo hacer?

    ResponderEliminar
  16. HOLA AMIGO AMI NO ME SALE PORQUE? LO PONGO PPERO NADA NO SALE LA IMAGEN DE FONDO EN LA ENTRADAAYUDAME PORFA ESTE MI TWITTER
    twitter.com/brandonsuarezz
    y mi facebook


    brandon cabrera suarez (judas) :)
    contesta xf

    ResponderEliminar