How To Add A Custom Background

Firstly, you need a picture for you background in the .jpg format with an optimal 1024 x 768px size.

You can use a scanned image, a personal photo, a digital scrapbooking paper, or make your own using an appropriate software such as Photoshop or a FREE equivalente software called GIMP. This is the one I tend to use because as I said, it's FREE!! You get the exactly the same functions as Photoshop and it handles pretty much the same too. It's the tool of choice for all the Manga digital cartoonist apparently, so you know it's no rubbish freeware!

Now that you have your image in the right format, let's get started!

Upload you image from your PC to an image hosting site such as Picasa or Photobucket. Both are free and you just sign up and upload away. This is so you get a direct link to the image.

(I have just learned about a great site called Picnik that has amazing photo enhancing and formatting tools. I'm heading over to check them out. Meet me back here for a discussion later?)

Leave this window open for now. We'll come back to it later.

Now open Blogger

Go to Layout

Then click on Edit HTML

Dowload your current template as a backup, just in case you don't like the changes later!

After the download of the template, scroll down the page until you find the following 3 lines of code: (or type Ctrl and the letter F to get the Find box and type "body {" in the box to find the code you want automatically)

body {

background: #ffffff;
margin: 0;




Substitute the above 3 lines with the following piece of code exactly as it is with all the punctuation: Copy and paste in place. 

body {
background:#fff url("post your HTML code of your image from Picasa or Photobucket");
background-position: down-left;
background-attachment: fixed;
background-repeat: no-repeat;
margin: 0;

Now go back to your uploaded image.

If using Picasa: Once your image is uploaded, right-click on it and click "Copy image location"

If using Photobucket: Once your image is uploaded, got to "Share" or click the Blogger icon, then "Get link code" and copy the HTML code for blogs in full

Paste this where you see the red code, within the quote marks.

Now View and see if you like it!

If not, Clear Edits and start again, or stop there.


When you are happy with it, Save Template.

FYI: If like me you want to know what does what...

The #fff refers to the colour of the background behind the image. This is shown when visitors have selected not to view any images on their browser. This is set to white, but you can change it show any colour you wish (refer to Blog Tips for help with colours)

background position = refers to image starting position

background-attachment = Set to fixed to avoid the image scrolling when you scroll down the page. The other option is to use scroll

background-repeat = repeat refers to the appearance of the image. For example, if you use a small jpg file, you will need to repeat it to cover the whole screen. Otherwise your background will appear as a small tile on the screen, and this is not the effect you want! Other option here is no-repeat (or even repeat-x or repeat-y)


Well, there is a lot to get your head around, but don't be afraid. Do it slowly and methodically. When it come to code you have to be anal, sorry :)

That's it for now, and let me know how you get on?! :)