Adding graphic background to blog Header

I have previously published a post on how to add a graphic to the New Blogger blog header in this post: Adding a graphic to your blog Header. With this method, other than pictures, you can add other stuff like Google AdSense ads, search box, etc. You also have the choice of leaving the Title alone (for search engine purpose this is good). Or like what a lot of people do, incorporate the title into the graphic and delete the text title which I think is a bad move as text title figure prominently in search engine for figuring out what a blog is all about.

Another way is to leave the Header and the Title as it is and add a background picture, as is done in this blog Business, Travel and Leisure and change color of the text Title to contrast with the background image (for example, for a dark image, make the text Title white). The way to do it is as follows:

First, backup your template (see post Backing up and changing your New Blogger (formerly Blogger Beta) template.

You will need a suitable picture already hosted on the web and have the URL ready. You can either use Blogger to host the graphic. See post Getting the New Blogger (formerly Blogger Beta) to host the photo for your profile, sidebar, Header, etc. (click "BACK" button to get back to this page) or use Photobucket.

Amazon products for graphics

Then in the template editor window, look for this block of codes

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

Add the following line to the CSS:

background-image: url(URL of photo);

where URL of photo is the actual URL of the photo already hosted on the web. (Note: you will see some advocating using
background: url(URL of photo);
but background has been deprecated and you should be using background-image instead)

The block of codes then become

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

You will have to ensure that the color of the title contrast with the color of the background picture. In the case of the blog Business, Travel and Leisure, the picture is dark, and the original color of the blog title will not contrast well with the background picture, making it almost invisible. I changed the color to white. The block of text was then changed to

#header {
margin: 5px;
background-image: url(url of photo);
border: 1px solid $bordercolor;
text-align: center;
color:#FFFFFF;
}

where #FFFFFF is the HTML code for white.

To make things clearer, I paste below the actual codes to produce the background picture and to change the color of the Business, Travel and Leisure blog:

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

Update 15 July 2007: Regarding whether there is a need to resize the picture to fit the Header, please refer to my response to Eternalsoul in the comments

Related posts

Special fonts for your blog clickable graphic header

How to put image or logo no the side of the header