Add graphic to blog Header: Easy way

I have previously publish a post Another way of adding graphic to your blog Header (click BACK button to get back to this page), but the result wasn't satisfactory. I had no time to do further testing. Now I have.

If you want an easy way to add a graphic to your Header, go to LAYOUT and click "Edit" on the Header Page Element. you will get a "Configure Header" pop-up:



You can either upload an image stored in your computer or enter the URL of a photo already hosted on the web. I have added a graphic to the header of Good Hobby Ideas. What I did was crop a section of a large image of the clouds. The image was saved in my computer so I click browse and located the image. I click "Save" and waited the image to be uploaded, then click "Save changes". The first time I did it, the width of the image was too wide for the width of the blog Header. So I went into the template editor (see Backing up and changing New Blogger template). From the CSS, I found this:

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

which tells me that the width of the Header is 750 pixels. I opened the free and very good Irfanview free photo editor and resized the width of the image and save the image again. I deleted the original too wide image from the Header, then uploaded the resized image again, and you can see the result at Good Hobby Ideas. You will notice the image fits the Header nicely.

Related posts (click BACK button to get back to this page or close new window if link opens in new window):
Adding graphic, Advertisements, etc., to your blog Header

Special fonts for your clickable image Header without having to delete the blog text title

Put image or logo at the side of blog Header

Another way to add graphic to your Header