Update:
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 { width:660px; 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.
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
45 comments:
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: http://www.furulundiii.no/ (warning - it's in Norwegian!).
I'm linking to an image from Picasa (on my Picasa account) (http://lh6.google.com/image/nilenico/Rfbn6XjKewI/AAAAAAAAAV8/A8QoM7U-y90/FurulundIII.gif), 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?
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.
Thanks you so much!
You really helped me here...
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.
oh my!!!
thx a lot. I was looking a lot for this kind of trick.
thx again
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:)
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!
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.
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.
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.
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.
http://shyeye-mylittleone.blogspot.com/
oh! never mind done already with some alteration on pic dimension. thks to you for useful tips like this.
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!
How do I edit the HTML on No. 565 template? The code seems to be different.
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.
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..:-)
Hi Nod
In your template, the header settings are found under #header_wrap {
Thanks for your help Jen. Like I said, I'm really new to this. I will need your help again someday..:-)
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.
Thanks
Gail
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.
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 buyanauto.blogspot.com Any help would be appreciated. Did I say I Love Your Blog and have it Bookmarked. Thanks.
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. :)
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.
Gail
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.
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?
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.
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.
Thanks for the useful info. Will give it a bash this week.
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 it.like 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.
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 http://www.geekphilosopher.com/MainPage/photos.htm
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.
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 {
background:#xxxxxxx;
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('http://img256.imageshack.us/img256/2737/990sa2.png') no-repeat;
margin-left: -9px;
...
...
I would make that image clickable. Can you or someone help me?
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.
Great article and here is the result. Let me know what you think.
i have tried this a couple of times, ona couple of blogs and I can't get it to show up at all.
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
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 (http://i95.photobucket.com/albums/l129/jdhatch75/banner1-1.jpg); " + "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
P.S.
I'm using minima stretch. My blog
I've have your button link on my page. Thanks
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.
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?
Thank you very much
its so useful article..
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..?
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!
I have something to say ...