Putting a Picture in Your Blogger Header

Regular readers may have noticed that I now have a picture in the header on my blog. The picture is Cimabue's Celebrated Madonna by Lord Leighton. I spent way too much time yesterday trying to get the HTML to work. Here's how I did it:

First, I found the picture and saved the .jpg. Then I loaded it into a blog post, backdating it a year so that it would be buried in the archives.

Next, I opened my template and looked for this section of coding:

#header {
background:#357 url("http://www.blogblog.com/rounders3/corners_cap_bot.gif") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}
#header div {
background:url("http://www.blogblog.com/rounders3/corners_cap_top.gif") no-repeat left top;
padding:8px 15px 0;
}
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
}
#blog-title a {
text-decoration:none;
color:#fff;
}
#description {
margin:0;
padding:5px 30px 10px;
font-size:94%;
line-height:1.5em;
color:#abc;
}

I right clicked on the blog post picture and copied the shortcut. Then I pasted it in place where the red text above is. Doing so placed the picture in my header as the background -- but only the left bottom corner of it, as noted in the green text above. So I changed the green text to "center center", and the header now captured the center of the picture.

Still, because the header is only about an inch tall, it only took a small slice of the picture. I needed more, and although fooling around with padding helped in preview mode, it had no discernible effect after publishing.

So I went to my Basic Options and typed this into my descriptor bar:

A Blog on Faith, Art, Rabbits, and Zombies[br][br][br][br][br]

That's my usual descriptor with five linebreak HTML tags if you make the straight brackets into slanty brackets. If you highlight my header, you'll see them. Anyway, that gave my header another inch of height and therefore more picture.

There's probably an easier way of going about it, but that's what I was able to figure out on my own.