Blogging Tips & Tricks

How to add background image or color in blog posts?

Add background image or colour in blog posts

Blog posts can become more informative and precise if we use various colors and images with them. Background highlighting is essential since it puts the main content in the front-end with more appealing aura. if you want your readers to focus on any particular part of an article like a quote or any code, then background colors and images is the answer.

When you have multiple authors on a blog and want to make a specific post stand-out, then you can change your post’s background color or place a background image behind them, each time when needed. Therefore, this tutorial will show you how to style each post differently by adding some codes in your blog posts.

How to add background image or color in blog posts?

Adding a background image or color is very easy, you just need to add the right piece of code.

Add background color in blog posts:

  1. When you create a post in Blogger.com, switch to HTML view.
  2. Near the Compose tab, add the following code just at the beginning and at the end of your post content.

<div style=”background-color: #DCC368; padding: 5px 8px 5px 8px;”>
Your text goes here…
</div>

  • Add the red line at the BEGINNING of your post.
  • Add the green </div> tag at the END of your post.
  • Replace the part in violet with your own color (put color’s hex value).
  • “Your text here….” is where the post content goes.

Add background image in blog posts:

Add the following code at the beginning and at the end of your post content.

<div style=”background-image: url(IMAGE-URL-HERE); background-repeat: no-repeat;”>
Your text goes here…
</div>

  • Add the red line at the BEGINNING of your post.
  • Replace IMAGE-URL-HERE with the URL address of your hosted picture (use Photobucket, Tinypic etc.)
  • Add the </div> tag in green at the END of your post.
  • “Your text here….” is where the post content goes.

Now click “Publish” and you are done.

ALSO CHECK: How to host images and videos on Blogger itself?

Done!

That’s All! We hope you enjoyed. If you have any doubt or query related to this tutorial then let us know by posting comments below.

You Might Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>