How to Add Different Background Color or Image in Each Blogger Post

When you have multiple authors on a Blogger blog and want to make a specific post stand-out, you can change anytime the background color of your posts or apply a background image behind them. And this can be easily done by wrapping the post's HTML in a 'div' element. You can apply this trick to your already published posts or you can change/remove it later if that's your wish.

Related: How to Add Different Backgrounds in Blogger Pages

So, this tutorial will show you how to style each post differently by adding some code snippets in your Blogger posts. Please note that this trick won't work if you have implemented the auto-read more function.


How to Change the Background Color of a Blogger Post

Step 1. Log in to your Blogger account, click on your blog and press the 'New Post' button.

new post blogger

Step 2. Once you have finished writing the post, switch to the 'HTML' tab and add the following code just at the beginning and at the end of the post content.
<div style="background-color: #444; color: #fff; padding: 10px;">
Your text goes here...
</div>
apply background color to blogger post

Note:
  • replace the hex value in blue to change the background color and the color value in green with the color of the post's text. You can use this Color Code Generator tool to pick your favorite color.
  • "Your text here...." is where the Post content should go, i.e. between the <div style="..."></div> tags.

How to Add a Background Image in a Blogger Post

If you want to add a background image in a post, add the following code just at the beginning and end of the post content:
<div style="background: url(IMAGE-URL-HERE); background-size: cover; color: #000; padding: 10px;">Your text goes here...
</div>
add background image in a post

Note:
  • paste the URL address of your hosted picture (use Photobucket, Tinypic etc.) where it says IMAGE-URL-HERE
  • the line in red and the </div> tag has to be added at the beginning and at the end of the post's HTML.
  • if the background image is dark, then you will need to change the text color - replace the #000 color value with #fff
  • "Your text here...." annotation tells you where the Post content should go.
Step 3. Now click the 'Publish' button and you are done.

18 comments:

  1. Thanks for posting this, I was trying to figure out how to do this, and now it's working!

    Now I wonder how to style the comments so they look sort of consistent with the posts...

    ReplyDelete
  2. I found some great information in your blog. This blog is very useful and helpful to me. Thank you for sharing this information with us informative .. I love your blog……

    ReplyDelete
  3. Nice... Can u please tell how to change the colour of background? I mean to ask can I use different colour?

    ReplyDelete
  4. Hi, thanks for this. I have a follow-up question. I am trying to create a border around a table with a graphic, so I need the image background to be centered. I put your code inside the (center) html but it stays left aligned. Is there anyway to center the background image?

    ReplyDelete
  5. thanks buddy!!! this is very useful!

    ReplyDelete
  6. Great!
    Thank you very much!
    Very useful together with a lot of fantasy!

    ReplyDelete
  7. Thanks Buddy..., You helped a lot

    ReplyDelete
  8. Awesome post. 'div' element belongs to css, right? Does that mean I can post in my blogger blog with css included?

    ReplyDelete
  9. thank you so much bro its simple and helpful

    ReplyDelete
  10. :o thank you! this is a great help!

    ReplyDelete
  11. Thanks bro , i inserted one background at :- http://www.thetechmadness.in/2014/08/life-links-1.html

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted.