Tag Archives: background image

How to Make Any Image as a Background Theme for Blogspot Blogs


In an Effort to make everyone aware of free Blogging Platform “Blogspot” and to attract More of “Non-Blogging” People to Change into “Blogging” Group we have started a New Series of “Blogspot for beginners and Theme Hacks” in Chaaps.com. In This Series we had Posted on How to Start a Blog on Blogspot/Blogger for Free which acts as Tutorial for Beginners.

Make Any Image as a Background Theme for Blogspot Blogs

Some of Our Readers are Keen to Know whether they could Customize their Blogspot Themes with their Own Image as Background! We found the Potentiality of having their own Images as background for blogs which could make more sense. With Own Images in Background, One Could Proudly Say “It’s My Very Own Blog”!

You CAN change default background of your blogspot blog just by Manipulating the CSS. CSS(Cascading Style Sheets) beautifies your Lame Web Page into a Colorful Page..All We want to do is, Just Get into the already existing CSS of Template and drop in our small piece of Code into it.

3 Easy Steps to Set Any Images as a Background for your Blogspot blogs.

Step 1:
From Your Dashboard, Click on Design and Then Edit Html, where we can see the codes. Search for body { using your browser’s Search Function (Ctrl+F)

Step 2:
body is a Class in CSS necessary to display body part of the Web Page. A Typical CSS Class is written with the Syntax

classname {
property2:value2; }

Once You Locate The body Class, you should be Seeing Something Like This…

Step 3:

All We Want to do is Remove The Background: Property and Replace it with background-image property by including Image URL so that you get your Image as a Background!

Here we are Changing The Background by including the Image URL of Chaaps Logo Using “http://chaaps.com/chaaps.jpg” . You Can Insert your Own Image which you desire by Image URL. (Use your Picasa, FlickR Image URLs, it has to be hosted somewhere on Web!)

Click on Save Template after Editing.

We Just Changed background:#fff with background-image: url{http://Chaaps.com/chaaps.jpg} and Here is The Result!

That’ it! You are Done!! Now Choose Your Very Own Images and Make it as your Blog’s Background Theme!

PS: Always choose light and mild colored themes to make the Content Elegant.

Kindly Comment if you encounter any Problem in Customizing themes or if you know a better way to do things.