Sunday, June 17, 2007

How To Add A Backgound Image / Picture To Your Blogger’s Header

There are a few ways to add an image or a picture to a Blogger’s header as the background of blog’s title and description. However, some of the ways are more complex or need some changes to the HTML codes. I prefer the easy and simpler way.

Here are the steps of a simpler way to add an image to the Header:

1) Log in to Blogger. In the Dashboard, click “Layout” and it will bring you to “Template” >> “Page Element” tab.

2) Look at the Header’s Page Element at the top of the Layout which contains the title of your blog. Click “Edit” and you will get the following pop-up:

3) If the image for your header is saved in your computer, tick the option “From your computer” and click “Browse”. Then locate the folder where your image is saved.
If the image is hosted on the web, tick the option “From the web” and type the URL of the hosted image.

4) Click “Save Changes”. Then click “View Blog” to view the result.


a) If you don’t like what you see and want to remove the image, then click “Edit” again on the Header’s Page Element. In the pop-up window, click “Remove Image”, and then click “Save Changes”.

b) After doing the above steps, by default, the header image will be shown as the background of your blog title and description. In case you have a header image that already contains your blog title and description, you can also place the header image to cover the default blog title & description.
Here is how to do it:
Click “Edit” on the Header’s Page Element. In the pop-up window, you can see that the option “Behind title and description” under “Placement” has been ticked by default. Now tick “Instead of title and description” option instead. Then click “Save Changes”.

c) To get the best result for an image to be the header’s background, you should use the image that has the same width as the header of your blog. If you’re not sure what’s the width of your header, please refer to this post to find out: How To Find The Width Of The Header, Main Column And Sidebar Of The Blogger Templates

d) In case you’d like to change the title and description alignment (e.g. to be left-aligned instead of centered-aligned), you can read the following post:
How To Change The Text Alignment For The Blog Header’s Title And Description

You might be interested in the following topics:

* How To Add A New Page Element (For Adsense Ads or Image / Picture) In Blog Header Of Blogger Templates

* How To Add A New Page Element (For Adsense Ads/Link Unit, Google Search Bar, or Text)
At The Top Of The Main Column (Blog Posts) Of Blogger Templates

* Some Tips To Solve Problems in New Blogger

* How To Change The Width Of The Blogger Templates