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!

May 10, 2007

Digg This Story

Background Image for Blogger Header (New)

We had recently noticed several changes and additional features to the Blogger layout. One of the notable and much welcomed change is the ease of adding a picture banner or image to the Blogger Header, as highlighted by our reader, dumper. The new steps covered in this article will supercede the previous articles titled “Background image for Blogger Header” and “Add Picture Banner Link to Blogger Header.” Those previous methods of putting the background image are still valid and effective. However, for many new bloggers who are not too familiar with coding, we think that using the latest feature by Blogger is an easier way of creating the Header image.

Do note that when you use this feature, the image will appear as a background to the Title and Description. If you want a picture on one side of the Header and the Title and Description beside the picture, we think it is still better to use the methods described in the article “Add Picture Banner Link to Blogger Header” as that will give you better control over the position of the various elements. You can also refer to our article in our FAQ showing you how to have a picture beside the Blog Title and Description.

Insert Header image

We assume that you have a ready picture that you would like to place in your Blogger Header. Edit the picture, touch up, and resize using photo editing softwares. You can download the free Google's Picasa or Irfanview if you don't have one. Save the picture in your computer or upload it onto an image server.

Login to your Dashboard. Go to Template -> Page Elements. Click to Edit your Header.

Background Image for Blogger Header (New)

You will see that you can now upload an image onto your Header either from your computer or from the web. After uploading the image, Save the changes and View your Blog. If you are happy with the picture, go back to Edit your Header again.

This time, you will see under the image further options on “Placement” of the image.

Background Image for Blogger Header (New)

If you choose “Behind title and description”, the image will appear as a background and whatever you type as your title and description will be visible on the face of the image. With this option, only the title links to your main index page but the image does not.

If you choose “Instead of title and description”, you will see only the image and the title and description are hidden from view. However, with this option, the image is clickable and automatically links to your main Blog page.

Align image to Left or Right

Update: We have a more detailed guide on alignment of the Title, Description and Header background images. In the articles, we discussed how you can move them to the center, or towards the left or right of the Header. Follow the guide on Header Image and Title Alignment (I) if you are using the Minima, Denim, Rounders, Herbert, Jellyfish, Harbor and Scribe template. Go to Header Image and Title Alignment (II) if yours is a Dots, No. 897, No. 565, Thisaway, Moto, Snapshot, TicTac, Tekka, Sand Dollar or Simple II template.

To have an image aligned to the left of the Header, go to Template -> Edit HTML, look for the Header image style and change it to the following words (in purple):-

#header img {
margin-left: 0px;


Similarly, if you want the image to appear to the right of the Header, it would be “margin-right: 0px;”.

This is applicable where the image replaces the Title and Description. If you retain the Title and the image is a background to the Title, the image will follow the position of the Title. To have the picture on one side of the Header and the Title and Description next to it, you may want to follow the guide in the article “Add Picture Banner Link to Blogger Header”.

Remove border around Header

If you see a border around the Header image that somehow does not go with the image, you can either change it or remove it. Go to Template -> Edit HTML, and you will see somewhere near the top a style defined for the #header-wrapper and #header. There is a setting for the border. An example is this:-

border: 1px solid $bordercolor;


This border has a width of 1px, a thicker “solid” line instead of a “dotted” line, and a bordercolor that is defined under Template -> Fonts and Colors.

To remove the border, either delete this setting entirely or change the 1px to 0px width. Preview the template and if you like what you see, save it.

Further Reading:

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.

Should you want to have a background picture as a backdrop to your main post, sidebar or whole 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

89 comments:

Neena said...

Wow - I wish this was around when I fixed up my template!

Lance Brown said...

Hi There,
I would like to introduce you to a new game called Blog Tagging. You have been tagged. For a full explanation go to my blog http://ezmakedollars.blogspot.com

Bill Blunt said...

This new departure by Blogger has the potential to take some of the misery out of blog design. Problem is, thanks to your brilliant tips, I was just starting to enjoy the misery!

Thanks again for helping me revamp Bill Blunt!

meleah rebeccah said...

dood, this site is soooooo amazing, great, insightful, crazy smart, I am such a fan. I come here alot, and decided I should probably TELL you how much I enjoy this.

I have the OLD BLOGGER TEMPLATE for my main page, (even though I uploaded to the new blogger) the rest of my pages are the new "drag and drop" template. This is so helpful.

I linked you using the button you have provided us "groupie types" such as myself!

Thank you for doing this!

Anonymous said...

How do you set up your sidebar article links without the standard Archives format of Month, Post title?

Each post title is directly linked to the individual page.

I noticed that your template doesn't display "Blog Archive" page element setup.

Is this a html hack of the template?
Best Regards

bizwhiz said...

Hi Anonymous

We did not add the Blog archive here, and you can also remove yours by deleting this page element in your Blog layout.

What we did was to create a Link list found in one of the "Add a Page Element" options. We prefer this than archive since it allows us greater flexibility in organizing our articles.

Princess Haiku said...

Hi Biz,
I came, I lurked, I voted for you. See you next time. I added a new technorati button to my blog this week. :) That is for me in the tech department for now. As you can see I need "Tips." Take care.

Bill Blunt said...

Hi Jen

Thanks to your wonderful posts here, I have totally re-designed my website. I even managed to design a little widget linking to this site.

Just a quick query - I have a lot of white space above and below my sidebar elements, which I'd like to reduce. Can you point me to a post here that would help?

Best wishes and thanks for your fine advice.

meleah rebeccah said...

oh my god! thank you so much! for the mothers days wish on my blog! much appreciated

bizwhiz said...

Hi Bill

Thanks a lot. I have viewed your site several times using IE and Firefox and with different screen sizes. I don't seem to see any big gaps or white space though. In fact, the present layout with a red and white theme looks nice.

There is normally a margin between every page element. It can be reduced but certain parts may look a little cramped as a result. Can adjust the values of the .sidebar .widget margins and paddings and see if you like it.

Bill Blunt said...

Hi Biz

Excellent - I made the changes to the padding for the widgets, and it's all looking much tighter, both for Bill and Harry McFry! How could I resist Fuelling Your Blog again? :-)

Bill

BlogmasterPg said...

I don't know if you remember of me, I'm an italian blogger that and I understand all what we know in "new Blogger" by you and your site. Now I have a question( I don't find in your site; if you go to see my new template og http://berlusconi-blog.blogspot.com my Humor's site, you can see the title is too hight. I'd like to put it in down of Header's photo, but i'd like the tilte remain the tilte and do not subsititute with a subtitle ( i don't know if you understand me...): thank You for all; you can see my progress in Geminilyon blog ( http;//geminilion.blogspot.com)..

bizwhiz said...

Hi blogmasterpg

If you want to shift the header title down, increase the top margin. Go to

#header h1 {
margin:5px 5px 0;

and change to

#header h1 {
margin:50px 5px 0;

or whatever value suits you. The first value is for the top margin.

Madhavi said...
This comment has been removed by the author.
Anonymous said...

Hi! I have just created my new blog and as a first step i tried to upload picture as background picture for my blogger header. First,I tried uploading the picture directly from my computer the the picture looks so,big just like a full size photo. then,I tried the secong option,I uploaded the picture into photo bucket,resized it and copied the URL and pasted it here in the blogger header editing part.I saved the changes and viewed my blog and I don't see any picture on the background of my title. can u help me know what is wrong with and tell me how to fix it.
thanks!
Prasad

bizwhiz said...

Hi Prasad

If you have resized the picture, would you try uploading it directly from the computer?

As an experiment, we uploaded a tiny picture and what appears in the blog header background is that tiny little picture. The size of the picture is not changed.

Madhavi said...

Hi Bizwiz!Madhavi here again!I need your help asap.I have changed my blogger header image.Even though the new picture I have chosen is fine normally and also in photobucket it appears tiny when I add it as URL to blogger header.plz go thro' my blog for more clear idea of what I am telling.I want the picture to look more clear and elaborate.plz tell me the best way to show this picture on my blog, either,left,right or centre ,or behind as a background ,which place suits best for this title to be to be adjacent to the title.For your help I am posting here the link of my photo.I have tried zooming and saving the photo using photo bucket.
http://i194.photobucket.com/albums/z232/madhavieranki/zoomveggie.jpg

Madhavi said...

http://i194.photobucket.com/albums/z232/madhavieranki/zoomveggie.jpg

Madhavi said...

the photo link iam trying to show you is not seen on this comments page so iam trying to post the link of my albums page in photo bucket.http://s194.photobucket.com/albums/z232/madhavieranki/

Madhavi said...

missing letters in all three links are "nki".try adding these links as continuation to the link posted before

bizwhiz said...

Hi Madhavi

If you want to enlarge the picture, you can increase the width and height.

Everyone has a different idea on what is nice and appealing. It is for you to decide whether you want the picture on the left or as a background. You may want to try out all possibilities and ask your friends or readers for feedback.

Amit said...

Hi,

Thanks for your post on adding header image. I actually have been unable to find the code that moves/aligns the image to the right or left.
If you have a minute, could you please take a look: http://hacksandbox.blogspot.com/

Also, is there a way to have the text/title be on the left side, and the image on the right side? Or, will the image always go behind the text, wherever it is?

Thanks.
-Amit

bizwhiz said...

Hi Amit

To set the title and description margins, you can add the styles:-

#header h1{
margin-left:50px;

#header .description{
margin-left:50px;

We noticed that the image alignment method we described is applicable to images that replace the title. If the image is a background and the title is still shown, the image moves with the title because it is a background to the title.

We shall be amending this guide to incorporate the method to have a picture on one side of the header and the title next to it. Thanks.

Amit said...

Jen,
Thanks for the prompt response, and look forward to the side-by-side hack.

Cheers,
-Amit

bizwhiz said...

Hi Amit

We have amended the article Add Picture Banner Link to Blogger Header to include the steps for having a picture to the left or the right of the Header, and keeping the Title and Description beside it.

Lew said...

HELP! You'd think it would be simple now that blogger has a way to upload pictures onto your header, but I can't figure out how help my sis-in-law's picture to fit...it's huge. Take a look and tell me if you have any suggestions on how to get it to fit like a normal header. Her blog is: www.coloradowhits.blogspot.com

Any help would be greatly appreciated!!

bizwhiz said...

Hi Lew

I think it has to do with your unique template. At the moment, the template stretches to occupy 100% of the screen width. There is no separate width definition for the header, and the picture to the Header is therefore enlarged.

You may want to try adding a width:60% to the #header{ or whatever value you choose and Preview the template. I am not sure if the alignment is good though.

Curt Purcell said...

Hello--in the Rounders template, all the header stuff (whether text or image) justifies left. How do I center it, please? Thanks!

bizwhiz said...

Hi Curt Purcell

Would you like to go to this tag and enter the text alignment? Preview it to see if it is ok. We don't use a rounders template here and can't test it.

#header {
text-align: center;

Curt Purcell said...

Thanks for replying, bizwhiz. That seems like it should solve the issue, but it doesn't.

bizwhiz said...

Hi Curt Purcell

We found it strange too. Just for you, we created a new test blog with the Rounders template at http://bizwhiz-test.blogspot.com/

We used this new Blogger feature to add a picture behind the title and description.

Next we went to this part of the template and added the text-alignment.

#header {
background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
text-align:center;

As you can see, the picture and text are in the center of the Header. We did not alter any other part of the template.

Curt Purcell said...

Hi bizwhiz--I appreciate the extra mile you've gone by setting up the test blog. When I pull it up, I don't know if it's a browser issue or what (I'm using Mozilla Firefox 2.0.0.4), but the picture still appears to the left, rather than centered. The text, indeed, is centered inside the picture, but like I said, the picture itself does not appear to be centered. I have my own test blog for playing around with the template like this, and the same happens there: text centered in the picture, but the picture on the left. I guess I'll just stick with what I've got, but thanks for taking the time to try to help!

Renee said...

Hi! I have been reading your blog for the past days. And I have to admit, your blog is the most detailed among all that I've read. You surely make HTML sound easy =)

My query is I've spent my whole evening trying to upload a header to my blogger which I made through Illustrator and saved as jpeg. I have been unable to post it by inserting picture (works but I cannot move the page element ON TOP of the existing header, to totally cover it], or by adding its URL (I used flickr). I have also tried adding a page element - picture AND HTML, but to no avail.

Is there a certain format for the file to be uploaded? It says "changes have been made" but nothing appears in my blog.

Hoping you can help me on this... Thanks, in advance!

bizwhiz said...

Hi Renee

Have you a Blog URL that I can take a look to see what the problem is?

When you say that you want the picture "on top" of the header, are you referring to replacing the header title with a picture, so that you see only the picture but not the title? Once you have uploaded the picture using Blogger's feature, you can go back to edit that picture. There will be an option for Placement of the picture. You can check the one that says "Instead of title and description".

We have tried with .jpg and .gif pictures and they work.

If we had misunderstood your question, please let us know.

Renee said...

Hi Biz, thanks for the reply! What I meant by putting the "picture" page element on top of the header, is yes, I want to replace the existing header with something that I made.
-I tried adding a "picture" through adding a page element. It came out, but I cannot seem to put it on the space where the header is.
-I also tried adding an image by editing the html code of the header wrapper but the image doesn't come out. On other times I've tried, it centers the whole page.
-And the most boggling of all, I cannot load a header image using the new way which is supposed to be really easy: adding an image through "configure header" (i tried both ways - url and from the computer). Yes I've seen the part when it asks if I always tick "Instead of title and description" because I want to replace the existing header. It always says "Changes saved for header." But nothing comes out... I have tried this on Windows and Mac, hopping it would be an OS problem because I've seen a lot of people on your page being able to do it... I think I may have tried everything. Maybe you can suggest some things that I may have overlooked. I followed the step by step instructions on your page. Will await for your reply. My url is: http://springsweetrythym.blogspot.com/
(I left my header design at the bottom of the page - using page elemen - since I can't drag it on top of the header... Thank you =)

bizwhiz said...

Hi Renee

First, the method which you mentioned - add a page element. You could see the picture but could not bring it to the header section. You could increase the maxwidgets and change the showaddelement to yes as per this article. You can now create a new page element in the header section. In our previous guide, we discussed how you could remove the title and use a header picture to link to your homepage. This is one way to do it.

Next, the new feature by Blogger. If you have any other picture (you can even use the photo in your post), try to upload that into the header and see if it appears in the header. If it does, it may be that there is something not right with the one that you have designed. You mentioned that you have the picture at the bottom of your page. We can't see it from your source, and therefore could not test it.

We understand how you feel. We felt the same in some of our trials too. Since you have come this far, we are equally keen to see this work for you. Please let us know how it goes.

Renee said...

HI Biz! Adding a page element by increasing maxwidgets worked! Thanks so much! Now that I know how my own title/header looks, I'll probably tweak it a little bit :)

And lastly, is there a way to delete the existing minima header? I deleted come codes that said 'header-wrapper' and such but it only deleted the border, so my blog name, Forgetful Lucy is still there.

Once again, thank you so much! =)

bizwhiz said...

Hi Renee

Glad that it worked. In that article on Add Picture Banner Link, there is a section called "Remove Header Title". You may want to follow that. If you want back the title in future, you can always create a page element and reinstate the title.

Renee said...

Dear Bizwhiz, thank you so much! All your tips worked liked charms =)

Judy Chow said...

Hi bizwhiz,

I have check this page too on how to do it. But I just couldn't get image display even I host my image somewhere, for both "Placement".

I have use HTML/java script page element to called the image in, and can click on the image. Thats is what I want, but not pic and title separate.

http://judyischow.blogspot.com

bizwhiz said...

Hi Judy Chow

We tried with your template - Mr Moto Rising. You are right, the image cannot be placed behind the title. It works in the other templates like Minima, Rounders. Probably Blogger team should take note of this.

You can add the title and text into the image through an image editor and save it as one composite image. Some people prefer to do that in order to use fanciful fonts in their title. You may want to consider that.

Class Act said...

Hey bizwhiz, I followed your steps for adding a banner, and it worked: http://between-thelines.blogspot.com. However, I can't get the image to be left aligned. I tried what you said, changing the margin-left of the header img to 0 px, but it still didn't move. Can you recommend anything else? FYI, my header wrapper is 660 px, and my image is 990 px wide (header wrapper + sidebar wrapper). Thanks.

Class Act said...

Never mind bizwhiz, I fixed it...had to change the header margin to "margin: 0 0 0 0"

Thanks.

James said...

I'm using Sand Dollar and can't center the image file in my header. I tried the suggestion linked from this site but it doesn't work.

Anyone have any other ideas?

Class Act said...

Actually, I do have one question about replacing the title in the header with an image banner; will this adversely affect my search engine performance somehow? Will search engines no longer be able to read my title and include it in the listings? And if so, what can I do to rectify that? Thanks.

bizwhiz said...

Hi James

We wrote an
article on header image alignment
explaining how you can align the title in Sand dollar template. Would you like to have a look and see if it resolves your problem?

bizwhiz said...

Hi Class Act

If you view the source code of your blog, you would notice the title of your blog at the top. So I don't suppose it will have an adverse effect on search engine performance. Since this is a Blogger tool, chances are they would have considered this before rolling out this new feature.

bizwhiz said...

Hi Mohit

You have asked a question about creating images. All you need is a software to help you create the artwork or graphics. Adobe Illustrator is a good software but it is not free.

If you are using it just for one image, you may like to source for free softwares on the net. These may have limited capabilities but they do provide the usual basic image creation and editing tools. A simple method of cut, resize and paste and a little creativity will give you a unique picture.

madamspud169 said...

I've been trying to changer the header graphic on the new blogger dots template & have managed to get the image on my site using add elements but it's at the bottom of my site not the top.
I cannot find the html in the template that is on your instructions to put it at the top or to create a new element option at the top. I'm not sure why & could really use some help. I can find footer info, sidebar, & outer wrapper but not header.

http://madamspud169.blogspot.com/

bizwhiz said...

Hi madamspud169

You raised a valid point. The Dots template is designed with no Header at the top. Instead, the Header is in the left sidebar. You can still add a picture at the very top. We updated our article Add Page Elements to Blogger Header to explain how you can do that.

madamspud169 said...

Thank you I've managed to get an add page element at the top.
Now to work on adding another sidebar.

SM said...

I am so appreciative for your site. It is SO helpful, SO detailed, SO simple. Thank you SO much! :)

I am using a rounders template on Blogger, and have been unable to get my Blog Title to link back to my home page. It doesn't do it by default, I have tried unsuccessfully for modify the html by myself, and even by adding the header image behind the title as you describe above. I am stumped and frustrated. Thanks for any help.

bizwhiz said...

Hi SM

You will not see a link when you are already at the Home Page. However, when you click a post title and are brought to another page, there is a link in the Title to your Home Page.

Alyson said...

Hi bizwhiz

I've tried uploading a picture to my header using the steps you describe. I have also tried re-sizing it through Picasa2, but it only allows you to change the width not the height! Any ideas on how I change the height? 700px width is about right for my header but the height is just too much!

Thx.

bizwhiz said...

Hi Alyson

It sounds odd that when you resize the image using Picasa, you can change the width but not the height. Look at the available options, you should be able to change both. Otherwise, try using other free image editing softwares, e.g., Irfanview.

As for the uploading part, users have commented that this Blogger feature does not work in the Moto Templates. One of your blogs is using that template.

Alyson said...

Question answered then! That's the blog I wanted to put the header in! I'll take a look at some other templates but I may have to just leave it as it is as I like how it looks with that template.

Thanks alot for this it was a big help and has saved me alot of time and effort!

hosnysoliman said...

Dear,
Can you tell me why i cannot change the picture in the header or the sidebar.When i try to change the picture their's a sliderbar in the place of the browser,so i cannot upload a picture from my computer.Please help me to solve this problem.

bizwhiz said...

Hi hosnysoliman

Which blog is that? If it is a Moto template, readers had said that it can't be done. We shall look at this particular template further when we set up a new blog under that template.

hosnysoliman said...

Hi dear bizwhiz,
here's the link to my Blog i hope to help me to solve that problem.
http://hosny45.blogspot.com/

bizwhiz said...

Hi hosnysoliman

You mentioned you cannot change the picture. Presently there is no picture in your header or sidebar. To recap what we said in our articles, you insert the background pictures here:-

#header-wrapper {
background-image: url(URL address of your image);
}
#sidebar-wrapper {
background-image: url(URL address of your image);
}

To test the image url, enter that into the browser. You should be able to see the image rather than a page of contents together with the image.

hosnysoliman said...

Dear Bizwhiz,
you cannot see any picture on my sidebar or on the header that because i deleted the last one completely from the sidebar thinking that may be it will work if i do that.
As i see you are talking about if i want to dwonload my pictuer form a url.No problem with that.what i'am asking about is to download from my computer.As i told you the porblem is the place to browsing my picture from my computer is blocked with a slidebar.
I do not what can i do do you think that their's a problem with the HTMl of my template?Or their's some thing wrong with Javascript?
Really i'am so happy for your kind cooperation,sorry if i disturb you.
Thanks again.

bizwhiz said...

Hi hosnysoliman

I am trying to understand what you wrote. This article is about adding a background image to your blogger header. Do you have problems with that? Are you able to click the "edit" link in the header to upload the picture from your computer? This is a Blogger feature and if you are using the new Blogger template, you should see it.

I asked the above because you went on to say about uploading picture into your sidebar. Are you saying that you cannot upload picture through Template -> Page Element -> Add a Page Element?

What does this "slidebar" look like? Tell you what, if you have such major problems with the way Blogger works for you, you may want to raise it with the Blogger team and see if they can look into it. The problems may be specific to your Egyptian blogs.

hosnysoliman said...

Dear bizwhiz,
Thank you very much, i had recived an email from the blog team.They had find some problem and they are going to fix it.Are you saying that you cannot upload picture through Template -> Page Element -> Add a Page Element?
yes when i try to do that i find a slidebar in the place of the brwoser to upload from my computer.
Thanks again for your help.I'am really sorry to disturb you all that time.

Aubrey said...

Hi,
I follow the instructions, and paste the url of the image I want in the box but the image does not appear. When I go back to the "Edit" page and try it again, the url isn't there as if I had never pasted it there to begin with. I'm not sure what the problem is. If you could help that would be great! thanks!

bizwhiz said...

Hi Aubrey

You can upload the image either from your computer or from the web. Are you able to upload it from your computer? Since you have no blog under your profile for us to look at, you may want to send your feedback to the Blogger team if you cannot assess this feature.

great bangladesh said...

Hi Bizwhiz
Please help me. Don't ignore me please. Do you know the link where I can download the "Mr. Moto Rising" Template?

bizwhiz said...

Go to Template -> Pick New Template to change to a new template.

napaboaniya said...

Hi! You've great tips!!
I'm having problems with the header image. I've uploaded, ticked "Instead of Title & Description" and saved changes. But my image still doesn't show up. I still see the words instead of the already uploaded header image. Please help. http://napaboaniya.blogspot.com

Thanks!!

Mauro Skizzo Barompriori said...

Hi everybody,
in my blog I use the three columns rounders 3 template taken from your great site and I had no problems with various background images used for the header (I usually change it once a month).
Unfortunately few days ago appeared a sort of bug: in the header the image is shown in a wrong dimension and it does not fit the header space.
How could it happen?
What can i do to correct it?
Thanks a lot,
ciao!

Laura said...

a huge thank you!! this is just so helpful xx

Anonymous said...

hey!! your articles are really good and explanatory.
How ever my suggest is to put some screen shots so that it would help beginners(like me) to visualize their blogs.

mohan said...

Than u..very nice post...

Plzzz Check my blog to make changes for SEO...

Weight Loss Tips

Telugu Uploads said...

Hello,
I have added a header sucessfully into the blog : www.angrezy.com
But the problem is i can see this header only in Firefox and not in Int4ernet Explorer.
Please help me out this issue.

Rafiq Raja said...

Hi Tips Team, I just happened to browse through your blog when I was searching for a fix for my blogger template. And now realize, that I could have made my life easy, if I had been here earlier. You are having a wonderful blog to help those who need help. Thanks for the same.

I am currently having a problem with my background image in header, (which I don't remember happening before). My Background image doesn't seem to be centering itself when I go to an higher resolution or a window size, much bigger than the image size. But surprisingly the Header Text seems to be aligning center, leaving out the image on the left.

After going through the tips in our site, I inspected the html content, and found header-inner having background-position as center, and other margins as auto. Could you help me around with this ?

My Blog would be Comicology

Fleet Commander said...

This looks very useful, except it's a bit out of date now and upload image simply refuses to work for me. I just get the big exclamation mark with revolving tics around it.

I CAN upload an image into a *post*, so i tried editing the html to link to that image (at blogger.com itself), but that doesn't work either. Why is it so difficult to simply put an image into the header..?

jerome said...

I wish you caould teach me where to find the TEMPLATE button on my dashboard.. I couldnt find it.. damn!
I wish you could help me so that i can insert my desired background image on my bloggers header... and follow the next necessary steps..
I also wish that you could post screen shots of those for easy understanding and tracking...

thank you so much,,,

jerometarriela.blogspot.com

Cicatrices Pourpres~ said...

hey i wonder if it's possible to put a large image header. so that the header is the only thing people see when they come into my blog, and the have to scroll down to begin reading my entries.

thanx!

tser said...

I tried uploading my picture its resized to 660 x 150. It doesn't appear! My blog header is still blank with only my title. I made sure my picture was completely uploaded and saved.

Rich Lee said...

i just joined blogger and got a blog going:

http://hallucinationsofreality.blogspot.com/

i cannot seem to change the header image. i click on 'page elements' but there is no EDIT button inside the header wireframe. it just reads text of what i entered first time around. i tried going into the code and putting an url in even but it didn't work either. i tried putting a 'yes' into the enable tag too. why is this so hard? from what i read in this post there should be an edit button in the latest version right?

~Çχ Atlantic♡ said...

I need help with this please... I do not want the image I am using to the left in the header.

I want the image to be dead center behind the blog title...

My code is this:

#header img {
margin-$startSide: center;
margin-$endSide: center;
}


^^ I am assuming this is what needs to be changed (?)

Thank you for any help with this...

:)

Inam said...

Dear Bizwhiz
First of all I want to thank you for this excelent blog. I have been following your blog for ages. I didn't have any difficulty understanding your posts.
This is my first reply because I wanted to ask whether there is a way to add alt tag in header image. If there is any please reply.

Tom said...

Thanks for the wonderful tip.This post helps me to reconstruct my blog template.

Cheers.....

The Angry Georgian said...

I love the post, and it's the only thing I could find on the subject but...
I have tried on numerous occasions to upload and link to my new header image that I made. The only way I can make it show up on my blog is to put it behind the title and description. The problem there is that my image is of the title and description. I thought I could just blank out the title and description, but it won't let me leave them blank.
If I use the option to use the image in place of the title and decsription, nothing shows up. The border for my header condenses down to a solid line.
I've used different templates, have never messed with any of the code. Blogger won't help.
Any ideas?

amy said...

Hey! I just wanted to say THANK YOU SO MUCH. This is an INCREDIBLE blog, and I really appreciate all your help. Cheers!

-Amy

Jessie said...

My question is similar to Lew's question....for some reason, my header background is ridiculously large. So large that you have to scroll left and right and up and down to see it. It is an image I just scanned from something I made, then I cropped it and uploaded it how you explained. My current template is Minima and I wasn't clear from your instructions where to tweak the image size. There is #header-wrapper, #header-inner, #header margins, etc etc etc. I'm brand new to blogging, can you dumb it down a little more for me? I'm experimenting on the following page: www.template-test1234.blogspot.com. Thanks so much!!

New Mommy said...

PLEASE HELP ME!!
I am not sure what is going on with my blog but this stupid yellow background is attached to my image in the header. I have another blog and I never had as many problems as I am having right now!! Thank you though for giving instructions on centering it!!
imafirsttimemom.blogspot.com

Kellogg's Camels said...

Thanks, what I am looking at is to have a background image for some of my gadgets (mainly links or text) on www.kelloggscamels.com. (e.g. widget "By runner" or "By category" on my site).
Any idea if this is possible?

John

Senshin said...

Hi

You have already help me alot.

I can't get the white lines around my Header image to fit. How do I do that?

Thank you :)

whyhello! said...

Hi there, wonderful blog! So glad you guys exist.

I really want to put up a banner for my blog but when I do upload the image from my computer it inverts!!!! The black lines go white and the whole colour sceme changes. The image is a jpg from a flattened image so it shouldn't be doing that.

Also, I uploaded it to photobucket then tried to transfer the image from the web and it wouldn't even upload anything, didn't even recognize it.

I'm at my wits end about this, what should I do?

xxx