HackingUniversity - Hacks . Tricks . How-To's

14 July 2013

How to Add Different Backgrounds to Blogger Posts & Pages

Well adding something interesting to your blogger posts and pages would surely attract more and more readers which in return would allow you to make a lot of money, well you always try to come up with good images, nice written text and much more, well have you ever wished to give a unique background to any particular post or page in your blogger for more awesome reader experience, well now you can easily by simply using Body CSS, so we will be discussing 2 different methods for applying this to your blogger post or page, lets see :)

Well the two methods work the same but its your wish which once you would like to use, so the first one is directly adding codes to your blogger template section and it will automatically give a unique background to your Blogger post or page and the another once is by adding that code directly in your Blogger post or page for more easier editing, well I prefer the second methods as it will not add more crap to your template in case you are planning to add backgrounds to all post or page’s in your blogger blog.

#1. Adding Background CSS in Blogger Template

Well for the first method we will be just adding the code in your Blogger Template section and it will automatically change background image in your Blogger Post or page section. So now just follow the below steps and enjoy.

  1. Open Blogger > Template > Edit HTML.
  2. Now press Ctrl + F and search for </head> tag & paste below code 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghWuVBmEWuwQr3HXANcBkQxJyP2O2O1PXPl8_YyC5-ur5RDM5PMIqf9nXHz0hrwXxpGT0-pUT9zHofrOQLtLbgcVCeMzccXTC0HCgvJs79KmliCCVpvAITx7Rop7c0NwgDR3GEzLwDtOfH/s1600/bg.png)center repeat}</style></b:if>

  3. Now just change the RED line in above code with your post or page URL Link and change the BLUE line with the image URL Link.
  4. Now just hit Save Template and see if the code is working or not, just open that post or page and you will see that image you just applied as your background.

So that’s it this was the easiest method to be applied but it has a drawback, the more backgrounds you want to add to your blogger post or page the more code will be cluttered in the template section so to overcome this problem we have second method check that out.

#2. Adding Background CSS Directly in Blogger Post or Page

Well here we have another option for changing background images in Blogger post or page but this one could be seem as little bit tricky but works pretty fine too. So just give a look at below method and enjoy this awesome method.

  1. Open Blogger > Post or Page > Edit Option.
  2. Now shift to your HTML Section and add Style code given below, see the image for easier approach.

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

  3. Now just change the Blue line with your Image URL Link.
  4. Now Hit Update Post and that’s it.

Now just refresh your Blog Post and see the new background image on that Post or Page, well remember this same steps work for page too , so now its your creativity just make it happen. Have fun and do share this post with your friend.