putting an image in a web log header

The new version of Blogger provides lots of fairly user-friendly ways to change the way a template looks (more about that in my Q4 notes) but getting an image, or replacing one, in the header area is a bit trickier. Because it involves putting one of your own images on a web site this may prevent many people attempting it but for those who think they can manage that bit, here's what to do:

1 Find out the size of the existing image. Firefox browser users with the Web Developer toolbar will find this easy. IE users could try right clicking on the image and looking at its properties. These notes are based on the Rounders3 template used for Q2 News and others and the image size is 740x150.
2 Choose an image that contains a section of this size that you'd like to use. You might get away with re-sizing a smaller image but it's better to start with something larger.
3 In an image editing program crop a section 740x150 out of the image. In many applications you can set the size of the area to be cropped and then drag the rectangle around to see what the extracted part will look like - useful as it's an unusual size that you're working with an large images may offer all sorts of unexpected possibilities.
4 Save the extracted bit as a separate file in any of gif, jpg or png formats, whichever is the most suitable combination of quality and file size. Avoid exceeding 30 or 40KB if you don't wish to annoy visitors on slower connections. Most image editors will have an 'Export' facility to help here.
5 Upload that image to the web somewhere. It doesn't need to be on a web page but if that's the only way you can do it that's OK. Although I haven't tried it, I guess putting it on a Flickr or Google-Picasa album page might work too.
6 Note the url of the image on-line. I put mine on my andrewx.com site so the address is something like http://andrewx.com/leaves5.jpg which is quite simple but you may have to go to the web site and right click on the image to get its url, then copy that to the clipboard.
7 From your Blogger Dashboard, go to settings and in the Template tab click Edit HTML.
8 Even I find some of the code pretty impenetrable but somewhere in there will be the instructions for where the page is to get its header. In one of my web logs it looks like this:
#header {
background:url("http://andrewx.com/butterfly5.jpg") no-repeat left bottom;
padding:0 15px 8px;
}
9 Well, it looked a bit different becuase it had a different url in the brackets! You'll get the idea, though - that url is what you should paste or type in (don't put any extra spaces or pubctuation).
10 Save the changes and see if it's worked.

I hope it did. I haven't got round to changing the header on this blog, which uses a different screen wide layout. It may be that some extra instructions will be necessary which I'll publish if I ever get time to try this one.