I have to start with an image, and this was the photo I started with. Then I have to create an image with background color the same color as the background color of the header, which is white. I opened Irfanview (click "BACK" button to get back to this page) and in the menu bar at the top, click Image > Create New (empty) Image, and a pop-up window will appear:
In the Dashboard, for that blog, I clicked Layout, then the TEMPLATE tab, then the EDIT HTML sub-tab to open the template editor window. I searched for this block of codes:
#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
That tells me the Header is 750 pixels wide, so I set the width of the New (empty Image to be 745px and the height to a suitable figure. I clicked on the "Background Color" button and selected white as the background color of the empty image I am going to create. When I am done, I clicked OK and I will be presented with an empty image (without that box with black border). Using the mouse, I "click, dragged and dropped a box where I want the photo to be pasted in and below is the screenshot of what I ended up with.
Having done that, I copied the above photo of a baby into clipboard, went back to Irfanview and pasted the content of the clipboard into the selection (box with black border) by clicking on EDIT > PASTE in the menu bar. The baby photo will then be pasted into the box (selection). The resulting image is shown below:
Actually, if not for the border added by Blogger around the originally empty white image with the baby photo pasted into the selection, you will just see the photo of the baby at the left. The border you see is not part of the image. Anyway, I would like to show just the baby without the gray background, so I saved the image with a suitable name, opened the image with Paint that comes with Windows, then use the eraser
icon and erased the gray background of the photo of the baby. I saved the image, then uploaded it into the file section of a Google group Photo Store file section I created just for uploading files and photos, click on the file to open the image on the web, copied the URL from the address bar (alternatively, you can right-click on the photo file, then select "Copy Link Location to get the URL of the photo) to use to put the image as a background as described in this post Adding an image as a background to your blog headerNote that by doing it this way (adding the image as a background), I do not have to delete the text Title of the blog, which I am of the opinion is important to preserve as the Title figures prominently in determining what your blog is all about. I don't think incorporating a graphic Title into the graphic image, then getting rid of the text Title is a good idea from the SEO (Search Engine Optimization) point of view.
5 July 2007: When I set up the Google group Photo Store, it was set up as a private group without me knowing. I tested this method and could view the baby photo (logo) at the left side of the Header without problem. That was because I was signed into the Google account which was used to set up the Google group. What I didn't realise was others who are not members of the Google group would not be able to see the baby photo (logo). Many must have read this post and viewed that blog Baby Center - everything about baby care, but no one bothered to comment to alert me. It was only today when I was using another browser in which I was not signed into that Google account and checked that blog. I was shocked to see that the baby photo (logo) wasn't visible! I now took time to upload the photo into Photo for Baby Center blog and used the URL of the uploaded photo to replace the one in the Google group. The baby photo (logo) should now be visible to everyone. My only regret is those who spotted the problem did not bother to alert me.
