How to Add Your Own Backgrounds to Blogger Posts & Pages

Adding some design and attractive colors to your blog would surely attract the readers to stay on your blog more time. They will surely click your blog and which results in earn more money. Now, in this article, I’ll show you how to Add Unique Background for Blogger Posts and Pages. You can add different colors to your pages in blogger. You can do this method by adding CSS scripts to your template section of your blog.

How to Add Your Own Backgrounds to Blogger Posts & Pages

Well, bellow I have described two methods for adding different background to your Blogger pages and posts. Adding this is so simple. In this first, you will add the CSS to your Blogger Template. And, that will automatically change the background to your Blogger Posts or Pages. If you want to add the different background for your own or custom Blogger posts or Pages then you can find the tutorial in the second Method.

Anyway, you can choose any one method for adding background to your blog. Let’s see how to add background in Blogger Pages and Posts.

How to Add Background CSS in Blogger Template

Step 1: Go to Blogger > Template > Edit HTML.

Step 2: Then, press Ctrl + F key in your keyboard and then search for </head> tag.

Step 3: After finding those tags just paste the below code just above it.

<b:if cond=’data:blog.url == &quot; http://omylab.blogspot.com/2012/06/enjoy-meta-tag-generator-tool-title.html &quot;’>
<style>body {background: url(http://4.bp.blogspot.com/-6YhcJAs1onM/UUlO0-VOrAI/AAAAAAAALns/_sJEhOucpPo/s1600/bg.png)center repeat}</style></b:if>

Step 4: Now it’s time edit your newly added tags. Now, replace the RED line in above code with your Blogger post or Blogger page URL Link and replace the BLUE line with the image URL Link.

Step 5: After editing your tags just click the Save Template button and check your blog post or blog page.

How to Add Background Directly in Blogger Post or Page

Step 1: Go to Blogger > New Post or Page.

Step 2: Now Click the “HTML” or choose HTML Section and add CSS code given below in that section.

<style>
body{background:#fff url(http://i.imgur.com/gfsY7PM.jpg)repeat center}
</style>

Step 3: Now, it’s time edit your style tags. Now, just change the Blue line with your Image URL Link.Now Hit Update Post or Publish Post and Have some fun.

Now, Check your blog Post and see the new stylish background image on that Post or Page. You can use this method for all the pages or Posts. When you’re publishing a new post then you can add this code in your HTML section, if you want to change the background. So, bookmark this page for your quick references. 

Well, I should thank Hacking University. I got these Style tags from Hacking University. Kindly share this tutorial with your friends and share your thoughts in comments. If you have any errors then you can leave those errors in comment below.
About Harshit Jain

Harshit Jain is a tech-savvy blogger. He is graduated from Mumbai University. He likes to share his knowledge through his own blog at TripoSoft, Best Beard Trimmer, Best Electric Toothbrush & TechHug as well as by writing guest articles on other blogging sites. Follow him on Facebook, Google+, Twitter.

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.