BYO Background (use a background image of your choice!)

This is something pretty special!

I have created a pretty generic simple naked template that is waiting for a background image you have or may want to use.

It's pretty simple to do, but in a nutshell: this template is a blank canvas and with a few edits you can fully customise the colour of the header and the background image and it can be easily transformed.

1) Install the template (as per normal):

YES! IT IS COMPLETELY BORING!
(settle down, we'll now jazz it up)

2) Find a background image you'd like to use on your blog. Of course it's your responsibility to make sure it can be used for a personal (or commercial) site.

For this example, I want to use this background by Totally Severe.


{STOP THE PRESS: Just look at some of the freaking amazing backgrounds you can find on Totally Severe here, here and here! I AM IN LOVE!}


3) Download the image, save to your computer. You will need your own image hosting. I like Photobucket. It's free. Whilst Totally Severe seems to already host their images on Photobucket, it's good manners to host images for your own site yourself.

Log into Photobucket (or similar), upload your image and then grab the direct URL address of the image:

4) Put the background image code into your blog.

Go back to blogger and click on the "Design" > "Edit HTML" tabs.

Scroll down the big box of code until you find the /* ---( page defaults )--- *:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #CCC url() repeat fixed;
background-attachment: fixed; }

You will see there are two brackets with nothing in them (in bold red, above)

Paste your direct image link in between the brackets. My code now looks like this:

*/ /* ---( page defaults )--- */
body {
margin: 0;
padding: 0;
font-size: small;
text-align: center;
color: $textcolor;
background: #CCC url(http://i200.photobucket.com/albums/aa231/free_blogger/redfruit.png) repeat fixed;
background-attachment: fixed; }


Click SAVE.

5) Add your header colour background

In the zip folder you downloaded, you will see a folder called "HeaderImages". Have a look in there and you'll see loads of different coloured header images. They all have curved corners:

(many more colours in the folder)

Pick one you like (or better still, pick on that matches your background image).

Click on the "Design" tab and then "Page Elements".

Follow these instructions (click for a bigger image):

THAT'S IT!

I added the red header image background and this is now how my test blog looks:

(click for a live preview)

Note: you can easily change the header text colour and sidebar bottom border colour by going to LAYOUT > TEMPLATE DESIGNER > ADVANCED. You will be able to change the colours to match your background there.


ALTERNATE HEADER IDEA: Why not take the header image and add your own text in a graphics program to reflect your own header title? It would look fancier this way! ..... then when uploading it select "Instead of title and description". Let me know if you want more info on that but it's pretty simple.

"OK Sharnee, that's amazing now please tell me where to get some awesome backgrounds from!!!!!!!"

• Totally Severe (in a word, AMAZZZZZZZING!)
• Ollibird backgrounds here and here (beautiful!)
  
• DinPattern - a great selection.
• Ava7 Patterns - loads of colours
  

• To download the xml template: click here (zip folder)
  
• Preview the site here
  
• Need help installing this? Click here
  
  

SHOW ME WHAT YOU DO! I WANT TO SEE!

Any questions or confusion, let me know!

PS: It's also a good idea to give the artist of your background a link, in the sidebar or footer. Don't forget ;)

PPS: Yeah I know I can't spell cappucino!