Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Feb 9, 2007

Digg This Story

Background Image for Blogger Header


With the latest Blogger feature, there is an easier way to insert a background image into your Blogger Header. The steps are discussed in the article “Background Image for Blogger Header (New)”.

However, by using the new feature, the image appears in the center, as a background to the title. For those who want more control over the position of the picture, like having the picture appear on the left or on the right of the title, it may be better to follow the guide at “Add Picture Banner Link to Blogger Header”as it allows you more control over the position of the elements. Alternatively, you can refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.

Should you wish to use an image as a background to your Header (just like the one you see above or this colorful one), get an appropriate image and crop it to size, about 660x150 pixels. A photo editing software like Google's Photo Editing Software Picasa or Photoshop would do the trick.

After that, upload the image to a free server. You can read about using free hosts like Google Page Creator and Google Groups. We also have a rather comprehensive list of free Image Hosts and File Hosting Services in our article on Manage Blogger Image Storage Space. Check out those sites and choose one that is fast, reliable and enables hotlinking to the uploaded files. Take note of the picture URL.

Next, go back to “Edit HTML” under Template tab. Scroll to where these lines appear:-

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

Add immediately after that the following line:-

background-image: url(URL address of your image);

Remember to insert the URL address of your image in the brackets. Save the template and refresh your Blog site. The image now appears as the background of your Header. Change the colors of the text if you need to.

Background Image for Blogger Header

This guide will give you an image background. Sometimes, you may have more than one image, all of which are suitable for your Blog. You can read Random Header and Background Images on how you can have the Header images rotated and a random image shown upon every page load.

If you want to replace the entire Header with an image or banner, to link the image or banner to the URL of your Home page, and to delete the Title altogether, please refer to the article “Background Image for Blogger Header (New)” or the other article on how to “Add Picture Banner Link to Blogger Header.” Should you want to have a background picture as a backdrop to your main post, sidebar or entire blog, you may refer to the article on "Background Image for Blogger Template."

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


Elin said...

Thanks for the tip!

I'm having some trouble with this, though.
The image appears in the blog preview, and on the blog itself when I'm signed in.
When I'm not signed in, the image does not show. This happens on Firefox, IE and Opera browsers.

Blog: (warning - it's in Norwegian!).

I'm linking to an image from Picasa (on my Picasa account) (, and I'm unsure whether the problem is with New Blogger or with Picasa.

BTW: I've tried different versions of the Picasa image - both the full version given above, and one with a Picasa max size set. Same trouble.

Any experience to share?

Anonymous said...

thanks for the help. i've been finding ways on how to make my blog more creative by putting a background image on the header, and finally, i've found the answer. and it was very, very easy. thanks again.

Paula Neal Mooney said...

Thanks you so much!

You really helped me here...

bizwhiz said...

Thanks to all. I am glad you found the article useful.

As for Elin's query, I have sent an email through your website's email address suggesting how you could get the Header image working. You should not need to sign in for the image to show. Feel free to keep me posted on how it turns out.

j4ur14 said...

oh my!!!

thx a lot. I was looking a lot for this kind of trick.

thx again

bizwhiz said...

Hi Elin
I have forwarded it to the email address u indicated. I am deleting your latest comment in case people spam your email address. Keep me updated:)

Elin said...
This comment has been removed by the author.
Elin said...

thanks for all the help!

Conclusion: don't use Picasaweb-images as your background image - it's tricky (I think they may have something against hotlinking). Use Photobucket or other similar services!

bizwhiz said...

Hi Elin

I am glad to have helped.

I haven't tried the Picasaweb. So far, I have only used Picasa as a photo editing tool, and it works rather fine. However, in the light of your experience, I have updated the contents of this article to detail how the image can be uploaded on free image hosts and even Blogger platform.

I have also written a new article on how to "Add Picture Banner Link to Blogger Header". This is for those who wish to have an image or banner to replace the text Header, to link this image or banner to the Home page, and to remove the Header Title.

Ashley & Byron said...

Do you have any idea why most of the "add new element" buttons appear with errors on the page so that the elements can't actually be added. Is something down on blogspot's website or did something happen when I altered my html? I'd appreciate any help you can give me because I can't add any pictures, text, etc. until I figure out what's going on.

bizwhiz said...

Hi Ashley & Byron

If you are referring to the error message that sometimes shows when you click "Add a Page Element," it happens as well to my bloggy friends who have not altered any part of their templates. When you close it and click to add the page element again, you are likely not to see any error message.

shyeye said...

hi there, i'm using minima lefty template but manage to change it to 3 columns using your tips with some alteration but i got prob with inserting the image on header. very kind of u can help me.thks.

shyeye said...

oh! never mind done already with some alteration on pic dimension. thks to you for useful tips like this.

Aldara said...

Thanks a million for your help. I was able to do the three columns and I am so proud of myself and thankful for your help. You are awesome! I have posted a link because if anyone needs help, they should come here first!

Cameron said...

How do I edit the HTML on No. 565 template? The code seems to be different.

bizwhiz said...

Hello Cameron

Yes, it is different but you can still change the Header image if you want. For example, in your case, you will see in your code a link to a picture "bg_header.gif" This is the current picture you have on your header. Try uploading a different picture onto a free server and link to that instead, and you will see a different image for your Header.

Nod's Blog said...

Hi, I'm new in this blog editing stuff. I usually just be content with the templates. but I see other blogs so interesting and cool. So I tried your tips, I checked in the html code, I cannot find the line for changing header background to graphic like your instruction. what's wrong with my template. can you help me..
Thanks a million..:-)

bizwhiz said...

Hi Nod

In your template, the header settings are found under #header_wrap {

Nod's Blog said...

Thanks for your help Jen. Like I said, I'm really new to this. I will need your help again someday..:-)

Gail said...

Hi Bizwiz,

Thanks for your great tips they have been really wonderful.

I do have a question. I have managed to change the header bg colour and upload an image that sits in the left corner exactly how I wanted it.

What I have been trying to do is add the same image but want it to sit in the right corner. How can I do this.

This is how I want it to finish up
image on the left same image on the right and Blog Title in the centre.


bizwhiz said...

Hi Gail

Offhand, I can think of 2 ways.

1. If you are using an image software, create a new blank canvas with a length equal to your header's e.g. 850px. Copy and paste the image on the left and right side. Merge the layers, save the image, and use this image for your header.

2. You can also upload the 2 pictures onto a free image host. Use img src="picture URL" tag to link to the picture and div align=" right" tag to align it to the right. I shall try to find time to write an article on image links and tags.

Chuck and Brenda said...

First off let me say, I Love Your Blog! Now for my stupid question. I am trying to add a unique image to the background of my header. I add the picture and there is still part of the old picture showing. I tried making it the same size of the existing picture which seems to be 750X150 Pixels. I am not sure what to try next. The picture shows up, but not the right size and it does not look like the code you gave as example. You can see my header code at Any help would be appreciated. Did I say I Love Your Blog and have it Bookmarked. Thanks.

bizwhiz said...

Hello Chuck and Brenda

You are using the rounders template. If you look at your #header-wrapper, you will notice that there is a corners_cap_top.gif. Copy this URL and enter it into your browser. Do you see the two little corners at the end? This is what did the trick to make the edges appear round. Next, look at the bg_hdr_bot.jpg. You would now see the background image with the bottom corners rounded. If you want to replace the header image, you could substitute this bot.jpg image with one of your own creation. If you do not want the green background, you may delete the background color code. Pl try it and see if your problems are resolved. :)

Gail said...

Hi Bizwiz,

Thankyou I managed to work out one of my image editors and got my header the way I wanted it.

one more question. The table you have at the top of the page with the message about your blog in it the greeny one. How do you get it centered.

Thanks for all your help. As soon as I get my blog setup properly I will link to you.


bizwhiz said...

Hi Gail

That is a table. As I can't post HTML tags and attributes in this comment box, I will try to cover it in an article.

niki said...

I'm using the Rounders template and I was able to follow your instructions in changing the header to an image. However, the top corners of the header isn't round anymore. How do I fix this?

bizwhiz said...

Hi Niki

The changes discussed in this guide are for the Minima template. I have made some earlier comments on the Rounders template.

To allow you to understand how your template works, look at your #header-wrapper, and you will notice that there is a corners_cap_top.gif. Copy this URL and enter it into your browser. Do you see the two little corners at the end? This is what did the trick to make the edges appear round.

Next, look at other bot.gif. Do the same and you should see the bottom round corners.

If you want to replace the header image, you could substitute one of them, eg. the top.gif to a picture of your own creation but with the top corners rounded.

Chuck and Brenda said...

Thanks for your help. I finally found the time to play around with it a little and your tips helped. I just have to play around with the colors now to get everything matching up, but I appreciate your help and you will see me again.

Jackie said...

Thanks for the useful info. Will give it a bash this week.

Madhavi said...

hi!I am Madhavi.I a new blogger and I came through ur site through food blog community link.Iam trying to add a picture in my blogger header.NOT AS A BACKGROUND,but adjacent to many bloggers do.I hope u r getting what I am trying to explain.Can u plz tell me how can I add image to my blog title.Also,I am looking for a picture of assorted vegetables to add in my blog header.I have a clipart image.but,I am looking for a pic as it wud be easy to add.Can u plz tell me where I can get the pic i wanted for free.Otherwise how can I add a .gif image in my blogger header.

bizwhiz said...

Hi Madhavi

Assuming you want a picture on the left or right side of the title, the simplest way is to use an image tag and align it to the left or right. The article "Hyperlinks and Image Links (II)" has detailed explanation on how you can do that.

As for sites with free downloadable pics, you can try a search on the net. Also, take a look at this site

Hedi said...

Thanks again for the trick!

I have a little problem with my banner, I'd like to center it but I don't know how...
I also would like to know if there is a way to set a different background to the area "outside the blog" like in yours the cyan blue color please.

bizwhiz said...

Hi Hedi

Somehow, we are unable to load your page. How did you place the image into your template? Are you using Minima template to begin with, or a tailor-made template? Anyway, you can use Blogger's latest feature to insert the picture into your Header. By default, they are centered.

In our template, there is a Page Background Color option under Template -> Fonts and Colors. You can also add the color code under:-

body {

jackass said...

Hi! Thanks for all tips!
But i've a question...
How cna i make my header clickable?
I've this code in my header:

#header {
height: 255px;
background: url('') no-repeat;
margin-left: -9px;

I would make that image clickable. Can you or someone help me?

bizwhiz said...

Hi jackass

If you uploaded the background image using the new Blogger feature, the header is clickable. You want to try that?

You can also use the Banner Link method.

Dascalescu Dan said...

Great article and here is the result. Let me know what you think.

Leanne said...

i have tried this a couple of times, ona couple of blogs and I can't get it to show up at all.

Anonymous said...

hey pls help me how come that my blogger dashboard doesnt have the TEMPLATE option above, but it has a LAY OUT option. what will i do? I could not follow the header changing instruction because of it.
pls help

detriangulation said...

Dear bizwiz,
I've screwed my code up. There were a lot of confusing characters after "background image: url" that aren't reflected in your sample HTML in the instructions. I got rid of all of it and pasted the url to my banner image, but it didn't show up, so I noticed the px height was blank in 2 spots in the code, so I tried putting in the px height (139) that conforms to my pic, but it's still blank:

...div expr:style='"background-image: url (; " + "background-position: left" + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "139px;" + "_height: " + data:height + "139px;" + "background-repeat: no-repeat; "' id='header-inner...

I want the image behind the text without altering the link, and I want the image aligned left. Can you help me repair the code? As it is now, if I try to use the blogger upload (which won't align image left anyway), instead of uploading the pic it goes crazy and centers the whole title and description of my header a few letters at a time, half way down the page, presumably b/c I've screwed the code up. When I did all this I'd checked the "expand widgets." You need to check that, right? Thanks

detriangulation said...


I'm using minima stretch. My blog

I've have your button link on my page. Thanks

Rajeev Edmonds said...

I am using minyx blogger template, there is no "#header-wrapper {" section in it. How to customize my header image for minyx template?

Please help.

Anonymous said...

You've solved the background image problem for me, thank you. However, I am publishing to an FTP site so I have only the template to work with (I'm using Minima). Can you tell me how to make the image clickable by editing the template?

mani said...

Thank you very much
its so useful article..

indoqvc_sfemale said...

hi Bizwhiz, thanks for your great site...!
I learn a lot from here.
anyway, can you help me?
I've problem with the header using minima template.
I want my Header has no space with the outer wrapper, so my header looks alike the part of outer wrapper(no space between) if I change the color of my outer wrapper and my header there's a gap, which I don't like..!
can you helpme..?

GaijinGirl said...

How would you go about decreasing the size of an image? I've figured out how to get it uploaded, but it's huge!

I'd really appreciate some tips!