blogger hack #1 -background image

I'm no tec guru but here's the first of my series of blogger hacks made simple. Now I'm not talking about rewriting the css/ or the html from scratch , just a few little adjustments !
Would you like a big pretty background image (very fancy eh !) ?
now I wont be the first or the last but a few warnings about big background images -
firstly - resist cluttering your background (says me -heh hee!)

firstly prepare you image !
Using whatever program you love PhotoShop/gimp/fireworks .....
Size : as pixel size is a major contributor to file size the image should not be to large or it will take to long to download !
I have been a bit naughty - I'm using a 1024 X 768 (not 800 X 600 ) but they tell me only 10 % of browsers are working 800 X 600!
here's a small version so you can see it ............

Notice I've left a fair deal of empty space in the centre and it fades to black (the background colour of my blog )

Optimise your image!
I like using PNG , for a number of reasons except that optimizing them can be a bit tricky and there's some left over gamma info in the file that needs to be striped for this i use a wee widget ..... called PNGCrusher - which has taken the pain away from this process and crunches massive 8bit PNG files down QUITE NICELY - thanks ! So I recommend it highly.

Upload the image !
-it does not matter where you upload the image to! but you will need the URL of the image (on its own) in order to display it .
eg : http://www.whatever.com/images/imagename.png
I find the easiest way is to copy and paste this from the browser address bar so i keep the image open in a tab or a window of my browser for later use.

HACK
Now I have minima black as a template so this is the only template I've tried it with
choose the edit html tab.......
go into the css
(at the top of the template!)
I found the body css and added in between the { parenthesis } three lines of code !

background-image: url(http://whatever.com.au/images/blogbg.png);
---this sets the background image (paste your images url inside the (brackets)
background-repeat: no-repeat;
---because I didn't want it to repeat -its not a tile after all !
background-position: center top;
----to position it


the resulting code looks some thing like this :
----------------------------------------------------------------------------------------------------------------------------------------

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-image: url(http://whatever.com.au/images/blogbg.png);
background-repeat: no-repeat;
background-position: center top;
}
-----------------------------------------------------------------------------------------------------------------------------------------
preview / save or debugg

Troubleshooting Tips
the url must be exact letter for letter (or no image) which is why I copy and paste it - no typos !
the css must be inside the { parenthesis }
the url must be inside the (brackets)
and it should go on the body css to apply !
-----------------------------------------------------------------------------------------------------------------------------------------
may the force be with you :)