How to adjust the height of the Header with a graphic as a background

A blog reader asked how to reduce the Header height of a blog with a graphic background in a comment in this post Adding graphic to your blog Header (click BACK button to get back to this post), and I have done that before in this blog: Business, travel and leisure. However, it was sometime back. I can only guess now. I think what I did was first crop the graphic with Irfanview to the proper height, upload the graphic to the web (this can be done using various methods including what is described in this post Getting New Blogger to host your pictures for the profile photo, sidebar, header, etc or using an external host like Photobucket, then getting the URL to the photo on the web.

Now you need to tamper with your template and a good thing to do is always to backup your template before you do that. If you are unfamiliar with how to do it, you should refer to Backing up and changing templates for the New Blogger which will also show you how to get to the template editor.

Now, in the template editor window, I think I looked for the blocks

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;
}

and then added

background: url(http://.......

so that the block of codes become

#header {
margin: 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTETiKvhpKDzYy0w4mT8bRE7d-DeEZugM5mZnBvlOaYGlb3BA1SVXIwAz16X2wwTnxWZ1tTPtgTd8oTf9IvXPL3cnR6ho67rLu6oh5tJsB89ktZH4dFcjaBvCdhKH7ZXcw3AQptubNypk/s1600/Bukit+Tinggi,%2BPahang%2BHEADER%2BGRAOHIC.jpg);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;
}

I am not very sure if that was the method, and if I have the time, perhaps I will test it again and see if that was what I did. And if I do that, I will make an update here.