Monday, September 22, 2008

How To Add Your Own Background To Blogger

Many of you may be wondering exactly how to add a background to your blogger template. Well the answer to this question is probably easier than you think. Read on to find out how...

1. Start by selecting an image you would like to use as your blogger background. You can use a photograph, or create your own custom background using a photo editing software. For those of you who would like to create a custom background, but do not have a photo editing software install on your computer, you may want to consider downloading a free (open source) photo editing software such as GIMP, InkScape or both.

(A word about GIMP and InkScape - These two programs are best used in combination with one another if you are looking for an open source photo editing solution. GIMP is a bitmap graphics editor, while Inkscape is a vector graphics editor. To find out more about what that means Click Here and read the section on "What is Vector Graphics." Personally I like to use both in combination with Photoshop.)

2. After you have selected/created your image, you will need to upload your image to a video and image hosting site. There are many different free video and image hosting sites, and it doesn't matter which one you use. Personally I like to use Photobucket.

3. Once you have your image uploaded to an image hosting site, then you are ready to begin. Start by logging into your blogger account. You will want to access your dashboard, so that you can see the "Layout" section of your blog as shown below:

4. Once you see the "Layout" screen then click on the "Edit HTML" button. At the top of this screen you will notice that there is a place where you can download and save a copy of your current template. I always recommend saving your template before making any changes!



Once your template has been saved, then the fun part begins! Scroll down to just below the "Edit Template," to access your blogger CSS and HTML code. You are going to want to find the portion of your code that says "Body" as shown in the above picture. Once you have located this portion of your code, the you are going to want to add the following:

body { background: url(Insert the URL of your image which has been provided to you from your video and photo hosting site here);background-attachment: fixed;


Your code should now look exactly like the code shown in the above photo with the exception of the change in URL's.

5. Once you have changed your bloggers coding then you are ready to preview your new template. To do this, simply click on the "preview," button located at the bottom of the page, as shown in the picture below.




If you like what you see then simply click "Save Template," and your done! If you don't like your changes simply click any other command button located at the top of the screen, i.e., "Posting," "Setting," to get out of this window. Be sure not to save your changes if you are unhappy with the new look of your blog. If worse comes to worse and you dont like the new look of your blog, and you accidently hit the "save changes," button, well, simply reload the original template we saved early on!

Now go have some fun creating stylish new blogger backgrounds!

13 comments:

Liz said...

You have a wonderful blog with so much wonderful information. You explained how to do a background on a blog so clearly. I will have to book mark you.

Victor Tabbycat said...

Great explanation! One little thing - the one block of red text is really hard to read against the background.
I thought it would be much more difficult to change the background... maybe Victor will trust me to play around with the blog ;-)

miss ubi said...

TQ 4 ur information....i really happy 4 this info....

BADASSREBELRICKY said...

it didn't work for me, it keeps showing my background plan and white, and not allowing me to make it black in any form. - do you know why this may be?

Seemamit said...
This comment has been removed by the author.
anna said...

it wont change for me either it just stays the same white colour i wanted a photo and followed your steps.. not working??? and ideas?

daves said...

I posted mine! I'm so excited about this. Thanks for hosting it! Add

Tifosi Guy said...

Cheers mate. Simply easy steps, and with the printscreen instructions couldn't have been easier !

Much appreciated

The Hand Of Hope said...

i thought this break down was so simple and amazing. until i tried it. like 80 times. it doesnt work! i tried revising. playin around. nothing works. help!

SimoneV said...

Was an AWESOME help man, thanks!
:)

Oneirologitis Zisos said...

doesnt happen to me !

Info Geek said...

thanks a lot

shorif ali said...

Thanks this helped alot it would help if people could visit my blog since I don't know any other way of getting more pageviews please visit slendermaninfo.blogspot.co.uk
thanks in advance