Cómo resaltar una parte de tu post con una imagen de fondo

1.10.14

No sé la temática de tu blog. A lo mejor es de recetas, de manualidades, de consejos de cualquier tipo, de vinos, de rutas, de costura, de viajes.... o de cualquier otra temática.

¿Te gustaría que tus lectores se fijen en determinadas líneas que quieres destacar de manera constante en reiterados posts?

Como podría ser el caso de recetas, una ruta de viaje o un consejo. Lo puedes conseguir con un fondo diferente al de la entrada. Un fondo especial.

¿No sabes cómo poner imágenes de fondo a tu texto?





Con tan sólo unas muy pocas líneas de código, serás capaz de resaltar lo que más te guste de tu blog, con un fondo diferente, para captar la atención de tus lectores y crear una harmonía en tus posts.

¿Dónde puedo utilizar fondos para mi texto?

Hay muchos casos en los que si utilizas un fondo con un poco de relieve, textura o algunas formas, conseguirás captar la atención de tus lectores y además, si lo utilizas regularmente (no simplemente una vez) harás que cuando la gente vea el post por encima, sólo con un vistazo, ya sabrán de que tratará el post, al relacionar el fondo con la temática.

Por ejemplo, me puedo imaginar que quedaría muy bien en
  • descripción de la preparación de recetas.
  • consejos para la lactancia, de psicología, de formación... (para destacar consejos de todo tipo).
  • en descripciones detalladas de excursiones.
  • en dar ejemplo de algo en concreto. Imagina que tienes un blog donde tratas temas en general y además pones ejemplos prácticos, sería un buen momento para resaltar el texto.
  • el paso a paso de una manualidad o un DIY.
  • resaltar un trozo de código para que tus lectores se copien.

¿Cómo pongo un fondo al texto de un post?


La verdad es que no es nada complicado, sólo tres pasos de nada!

  1. Escribes tu texto hasta que esté bien bonito (el que quieres poner con un fondo).
  2. Pasas a el modo HTML (arriba a la izquierda de la pantalla donde escribes el post).
  3. Añades una línea de código justo antes del texto que quieres resaltar.

        <div style="background-image: url(la url de tu imagen);">

  4. Añades una línea de código justo después de tu texto.

                                  </div>

Te lo he prometido que era muy fácil!

¿Cómo sé la URL de la imágen de fondo?


Es muy simple. 


  1. En tu mismo post o en otro (para no liarte) añade la imagen que quieres poner de fondo, de la misma manera que siempre añades una imagen.
  2. Ve al modo HTML (arriba  a la izquierda).
  3. Busca la imagen. Si la pones en una nueva entrada sin nada más será más fácil de encontrar! :)
  4. Tendrás un código parecido a este

    <img border="0" src="http://2.bp.blogspot.com/-43gGKu4Uu5CoyI/AAAA03Ok/s1600/Poner%2Bimagen.png" />
  5. La URL de esta foto es lo que hay entre las comillas.

                            src="LA URL QUE QUIERES"

¿Qué fondos puedo poner?


Pues aquí he preparado unos cuantos ejemplos, que si te gustan los fondos, al final te los podrás descargar!


  Receta de macedonia

   Ingredientes
   un plátano
    dos peras
    una manzana
    el zumo de un limón


    Antes de empezar con la receta, lávate bien las manos y ponte un delantal!

   Pela toda la fruta y trocéala a la medida que más te guste.

   Disfruta de la fruta! :)




  Receta de macedonia

   Ingredientes
   un plátano
    dos peras
    una manzana
    el zumo de un limón


    Antes de empezar con la receta, lávate bien las manos y ponte un delantal!

   Pela toda la fruta y trocéala a la medida que más te guste.

   Disfruta de la fruta! :)




         Receta de macedonia

          Ingredientes
            dos peras
            una manzana
            dos plátanos
            el zumo de un limón


           Antes de empezar con la receta, lávate bien las manos!

           Pela toda la fruta y trocéala a la medida que más te guste.

           Disfruta de la fruta! :)



Como puedes ver me he inventado la receta en un segundo, sólo para que vieras el efecto que hace un fondo detrás del texto. 

Aquí te dejo unos fondo para descargarte. Los puedes utilizar donde quieras y para lo que quieras!

Míratelos, que seguro que hay más de uno que te gusta! :)

Este es un post que me pedisteis muchos de vosotros. Espero que ahora lo puedas utilizar en tu blog!


Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.