How to add Picture to Beta Blog Header. ~ The Blog Doctor.

How to add Picture to Beta Blog Header.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

To add a picture to a Beta Blog Header............


Then Upload your picture to a free host like Googlepages which offers 100 MB free space. Copy the url of your picture and keep it.

Most Useful Link in Beta Blogger is Download Full Template in Edit Html subtab of Template tab.

Log in to Blogger Beta---->In Dashboard choose your blog and click on Layout------>This takes you to the Add and Arrange Page Elements page------->Click on 'Edit Html' Tab to open the Edit Template page. Let Expand widget templates box be unchecked. In Edit template field scroll down till you come to the code for the header which is :

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="false" title="The Widgets of Beta Blogger. (Header)" type="Header">

In the above code change maxwidgets="1" to maxwidgets="2"
Also change showaddelement="no" to showaddelement="yes"
Save Template.

Now click Page Elements tab. The Add and arrange Page Elements page opens.
Here you can now see that header section has a Add Element link. Click it to open the choices page. Choose Picture type.
SEARCH ENGINE OPTIMIZATION For better SEO Choose Html/Javascript Page Element. Then in the content box paste the code for the link to your uploaded picture : <a title="YOUR BLOG TITLE" href="BLOG URL"><img src="URL OF YOUR BANNER AT GOOGLEPAGES" alt="YOUR BLOG TITLE"></a> and Save.
Click add to blog. In the content page that opens paste the URL of the picture you have saved at Googlepages in the URL text box. Save changes. View Blog. Enjoy.

If you feel you would like to remove the Title part above your Picture in the Header go back to Page Elements and click on Edit link in the Title box. In the popup window which appears click 'Remove'. If there is no Edit link in Title box then go to edit Html subtab and scroll down in Edit Template text box till you come to :

<b:widget id="Header1" locked="true" title="The Widgets of Beta Blogger. (Header)" type="Header">

In above code change locked='true' to locked='false' and save template. Go to page Elements subtab and now there will be an Edit linkin the Title box and a Remove link after clicking on Edit.

To Add a Picture-Link in your header follow the instructions given in How to insert a Banner Link to your blog in your posts. Apply these instructions to your header to create a picture with a link to your blog home.

Technorati Tags:,


Tammy Templeton said...

Thank you so much for your instructions on adding a banner to my header. Since changing over to the beta blogger I lost my header piccie and have spent all day trying to fugure out how to get it back there :)
Thanks to you I managed to do it in like 2 minutes.
As thanks I have added you to my links. There are always people asking how I did that, so now they can check out your blog and discover for themselves.

Thanks again.

Seagull said...

Thank you very much.
You have explained the instructions in a layman's language and that really helped.

webwatch said...

Thank you for step-by-step instructions to modify the blogger template. With the help of your blog I could change the background to the image I want.

Clare said...

Thank You so much for this information! I've search high and low on the web for instructions on how to add a banner!
You come to my aid!

Thank You very much.


Melinda said...

thanks for these instructions! i'm going to try it out.


Dan said...

i'm a little confused about the title tag... wouldn't that be bad for seo to remove the title tag? Isn't there another method... of leaving the title and description intact... and to use css to layer an image above the header, so you only see the image... but the header title and description are still intact and readable by the search engine?

vin said...

Hi Dan,

You can add a banner link to your blog just above the posts and in the footer and in the sidebar add a button link See :

I think that should be enough or they might call it spamming!

Also see :

James HotMovies said...

I have been searching out this information all day.

Your tutorial was excellent, best one I read.


Eve said...

First Fantastic tutorials by far the best I've seen concerning the new Blogger.
Which I've been having a lot of trouble with lately.

Now that I have my blog header image up I need it to be hyperlinked to my homepage. Any suggestion on how to do this??

Thank you so much!

vin said...

Use the code shown here :
Insert Banner Link to Blog
Put the link code in a Html/Javascript Page Element in the header.

Dana said...

Thanks so much for the concise, workable directions! I am happy to finally get rif of that annoying title header that came with my template.
Any ideas on how to get rid of the rounded corners in the template too?


vin said...

Those corners are represented by graphics. Just look for their url in the css and delete them

Peter said...

Hi Vin,

I have published a post How to get screenshots of your blog in various browsers and with different settings. I have acknowledge that I came to know about browsershots from you in the post. Thanks.

Peter a.k.a. enviroman
Enviroman Says

vin said...

Thanks for visiting. I will take a look at your post also.

Editor said...

Hi Vin,
Thanks a lot, your explanations are getting better and easier to follow by the time ;-)

freemo said...

Thank you for helping me modify my header! Very easy to understand directions!!

JenniJane said...

how do i edit the size of my banner? i wan it to fits the whole page. which size is the best?

vin said...

This depends on what resolution you want to optimize for. For 800 x 600 it is too big. For 1280 x 1024 it is small. Resize banner in an image editor to the size you want.

Kim Eschler said...

Thank you!! I have spent my weekend trying to do this!
My last question is how do I get rid of the line graphics that were around my old header? I got rid of the header, but the graphics are still there.
Thank you!!

vin said...

Look in beginning of your template for code having word header like this :
#header OR

It will have a line describing the border. Delete it and save.

The Populist said...

I want to center my blog title and picture, How do I do it?


Carlu* said...

thanks a lot!
but, I have a doubt.
I removed the title and put an image, but there is a tiny space that stills that I dont know how to remove it.
i'll be gratefull to know how to make that.

thanks. =)

vin said...

What is your blog url? For any problems contact me directly. The email address is in left column.

mimis said...

How could I insert a GIF in the sidebar of my blog? I tried using add new page element/picture but the gif doesn't work; it still remains fixed. So doesn't blogger support gif in the header but only in posts?
Thank you

vin said...

Upload image to a freehost and paste the link in this code :

<img src="LINK OF PIC"/>

then paste the above code in a Html/Javascript Page Element.

Anonymous said...

this has worked for me except that when i go to upload the image from googlepages, i get the exclamation point in the triangle for ages. is my image too big? it's 952x842.

vin said...

Look in your template for header/header-wrapper and note it's width. That should be the width of your image. Also use Firefox browser and clear cache.

Aubrie said...

You are fantastic! Thanks! I had no problem getting the header I made in photoshop on my blog from you instructions, but I can't get the image to appear bigger on the blog. I've tried adjusting the image size in photoshop, but no matter the size I adjust it to it still looks the same. Any suggestion?

vin said...


What is your blog url? Use my email address in left column for detailed help.

Anonymous said...

thanks so much for this tip, so easily explained.

Gail said...

Thanks very much for this detailed, informative post. I have an additional question. I would like to put my title above the banner photo I added. Is there an easy way to switch these two page elements (the drag action will not let me move the header). Thanks!
Gambits from Gail

vin said...


Template---->Edit Html---->Scroll down to widget code in header-wrapper and look for the line with the code "maxwidgets=2" . Change this to 4/5 and save.

Then go to Page Elements subtab of Template tab and now try to drag and drop title widget above the HTML widget.

Gail said...

Worked like magic! What does '4/5' mean? You're amazing!

Gambits from Gail

es. said...

Hi there, i've just started to design my blog @ and wish to achive something simular to but in black.

I've tryed a number of tutorials from this site and can't get any of them to do what I need to create, for example following the putting a picture in the header tutorial didn't work when I followed instructions?

I'm thinking that it would be easyer to create a blog page from scratch as this is very complex and temperamental, is this the case or am I missing something?

Please help us out! Thanks

vin said...


Where exactly are you getting the error? Always refresh the cache after saving the template. See :

Use Firefox browser.

Meg-Dan-n-Eli said...

I cannot figure out why every image I upload to my header (or sidebar, for that matter) extends past the right of the matter how wide I make the image in Photoshop. How do I keep the image nicely contained within the boundaries of the header?

vin said...


Have a look at the header tip in this post :

BayingAtTheMoon said...

Thanks for the tip which worked first time! Is it possible to put images on either side of the title inside the header or to make the header smaller and add page elements on either side of a 3 column template?

vin said...


For the first see :

Customize Header

For the second you will have to delete the title (header) section and then add a separate title section on top of your posts column.

Mer said...

First of all, thanks for the easy-to-follow instructions for adding a picture to my header.

My question is about a partial border I have around the banner added. On three sides there is a fairly thick white border. Is this info that is included in the html and can be tweaked? Wouldn't be so bad if it went all the way around...

Thanks in advance!

vin said...


Go to Template---->Edit Html and scroll down in Template code box to this code :

#header-wrapper {
margin:0 auto 10px;
border:1px solid #333333;
#header {
margin: 5px;
border: 1px solid #333333;
text-align: center;

In the border lines change 1px to 0px and click Preview to see the change. Then save. If you want border on all sides see header tip in this post :

Quick Tips for Bloggers

Mer said...


Good to know I was on the right track. I had actually found that bit of code and changed the color to "bgcolor" (black) hoping that would solve my problem. Probably would have, too, if it hadn't turned out to be a part of the jpeg I had exported from my draw program! Ugh...

Anyway, the problem is fixed now. Thanks again!

Crusheer said...

Hey, im probably totally retarded, but how can i delete the name of the blog on the header?
I want to get rid of that text....

Vin said...


Have a look at :

How to hide Blog Title and Description

meeshoke said...


thx 4 helping me. dunt knoe how to add pics in header page .
i followed ur instruction n now i got it.
thx in advance

janeywan said...

Thanks Vin,

I have had a blog for many years and recently changed template, for some reason all that I had learned before with inserting header photos wasn't working anymore. I tried many different things and this finally worked. Simple and got the job down. Will this effect page loading because it adds one more java script? I've had complaints regarding my load time.

Thanks, oh and your text size is great for us older folks that don't see like they use to.

Harishchandra Shetty said...

u please check mine blog....
i posted mine header in blog
but its not placed in the the center as u can c
please help me..........
mine e-mail id
please how to make it vissibe in the cenetr of the top page

Vin said...

Harishchandra shetty,

Have a look at the header tip in this post : 10 Quick Tips for Smart Blogging.

arina1992 said...

I tried doing the one to put images in the header. After I did it, the images are above my blog title and description. Is it possible to add the images BELOW the blog title and blog description?

Vin said...


Use same method as in above post. Only change maxwidgets=3 and save.

Shift to Page elements tab and now you can drag the Picture Page Element from top to bottom of the header and save.

Peter Yew said...

Hi Vin,

Appreciate if you can guide me to emplace the header picture in the centre and remove the blue box behind my blog that uses the Rounder 3 template. Please check out my blog at for the problem. Thanks.


Vin said...

Peter Yew,

Try this method.

ms. avocado said...

Hi vin,

When I added a picture from my computer to the header, the height goes over the header borders and behind the posts. This began happening when I adjusted the height of my header to 250 px. How do I adjust my image size as well to fit into the header?

all I wanted to do was to make my header smaller and then my picture began giving me problems.


Vin said...

ms. avocado,

Either delete the code specifying height for the header OR resize image to that height in an image editor on PC and then re-upload to header.

Lip Service said...


I have been trying to change the header of my blog to include my logo for quite some time now. Everytime I use the information given to me from only tutorials I run into and error after I save the template. It says that the template because, "cannot be saved More than one widget was found with id: NewsBar1. Widget IDs should be unique." Can you please help me? I want to use a template that I found online and adjust the header to look customized.

Another problem that I am running into is that the side margins are too small for my photos.

Any help would be very much appreciated. Thank you!

Vin said...

Lip Service,

As soon as you get an error like that scroll down the template and find 'NewsBar1' and change it to 'NewsBar10'.

You can increase width of blog so pictures fit.

krazylilkel said...

I really liked this info. I tried out what you said though and for some reason, the border from my minima header is still showing up. It's making everything look really tacky. Any suggestions?

Vin said...


I do not see it. Try clearing the cache.

ERS said...


thank you for this article. i have successfully added a picture instead of the header text. i used your fluid width template and it worked great. however, the picture in my header stays the same- it doesn't extend when i enlarge the screen. is there a way to make it also "fluid"?

thanks for your help!


Vin said...


Images are fixed-size elements which cannot be resized dynamically.

♥ alicia bee said...

Hey Vin,

How do I place a picture as my blog header, instead of the title/descript using the old template version?

[ The one where you change it manually, using html ].

Thanks <3

Vin said...

♥ alicia bee,

Use the method shown in Add background picture to header in the CSS since the CSS coding is same in Classic and Layout templates.

Lucille's Moneymaking Programs said...

Thank you so much for the easy explanation! I will visit this site often to check out more of your articles.

Mike said...

Thank you very much, I had to do a Google search after I messed up my header somehow.


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.