now click that and you will see the following image browse for the image you would like to add as the blogs header it can be on your computer or hosted on another server
Now if you would like to add it the other way go to the edit html tab and find the following CSS code it depends what template you have this is based on the one from my previous tutorial which can be found HERE.
and add the code Ive highlighted below of course change the URL to where ever you have the image hosted also you may need to change the height and width depends what size your image is and you may need to optimize it for the web so your site loads faster
so now you know how to add an image to the blogs header
UPDATE: i have notice lots of people's blogs header has shrunk i have managed to come up with a fix which works for some depends what template you have first make sure you download a copy of your template next add the following CSS code you may need to alter the height and width to whatever you need
#Header1_headerimg {
width:100%;
height:95px;
text-align:center;
}
if this helped dont forget to leave your comment and let me know
Update: i have wrote a new fix here
28 Responses to “add an image to blogs header”
Deeba PAB
December 13, 2007Thanks Jamiz...I did it!
Peter
December 14, 2007Hi! Jamiz, thank you for the link to this page. Great tip!
Peter
December 15, 2007Hi! Jamiz, thank you for helping me over at the Blogger Help Group. It took me 6 hours but I finally got it to work. Why 6 hours? I'm as thick as a brick! I added some final commentary over at the group as well.
I wish you a Merry Christmas and a Happy New Year.
Regards
Peter McCartney
Sydney Australia
FriendinME
December 15, 2007I read your comment at the help section... and I tried to enter the code you gave here, and it gave me an image under an image...
I went back to the header dialog and removed the image there, but now, the image in inserted in the code doesn't show.
arggggg... could you please help me??
what do I need to do to make the image I inserted using your code come to the front??
www.mypointless.com
(I removed the code)
Anonymous
December 16, 2007Hey, it dint work for me :(
www.bepferg.blogspot.com
its looks the same when i added the code thing
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#Header1_headerimg {
width:100%;
height:95px;
text-align:center;
}
/* Outer-Wrapper
----------------------------------------------- */
CAN U HELP ME PLZ?
E-MAIL ME AT:
voodoodoll125@yahoo.com
ParkRidgeUnderground
December 16, 2007We have used your tweak and have been able to produce something we can live with on a temporary basis.
Your time and effort spent assisting the blogging community on the myriad header issues is much appreciated.
Thank you,
PRU Admin.
sonia a. mascaro
December 16, 2007Hi,
Thank you! You help me a lot.
My header has shrunk, too and I fix it changing the width:100; and height:100% too.
It's works!
If you have the time, take a look on my blog Leaves of Grass.
My very best regards from Sonia, São Paulo, Brazil.
VanceH-
December 16, 2007My template must be different. I had to use the code below and adjust the height appropriately.
#header-inner {width:100%;
height:250px;
}
Thanks for the tip though, it got me on the right track.
Kathleen
December 16, 2007Hello All! I am not tech-savvy enough to follow this advice :-( I don't know how to make a photo or picture on my PC have a URL. I always upload photos onto my blog using images from my computer feature.
Since we all hate the fact that Blogger has taken away the custom header (I mean, really, who has a picture that fits into the new short, narrow box? No one!)
I am so confused. And so bummed! How does making this new universal header help Blogger in any way? It greatly limits and restricts the first thing readers see on our blog (and how they identify it).
Does anyone know how to contact the Powers-that-Be at Blogger, so we can persuade them to lift this new restriction on customizing our headers?
Thank You!
Kathleen
www.kmoriarty.blogspot.com (Buddhafly)
Email: Kathleen@kmoriarty.com
Thanks!
VanceH-
December 16, 2007Hi Kathleen,
I looked at the source for your specific blog and you have the same sort of template I do. I tested a simple two line addition to your template that worked (at least for me for your blog). I know this looks like brain surgery, but this change is quite low risk. Steps:
1: Log on to your blogger dashboard
2: Select "layout" for your blog
3: Select the "Edit HTML" tab
4: Save a backup of your template by clicking the "Download Full Template" link, and then selecting save for each of the two dialogs that come up. This backs up your template on your computer. If this doesn't work stop.
5. Left click your mouse while the cursor is in the Edit Template code window and move down in the window with the cursor keys until you see:
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
It will probably be down around 100 to 150 lines (about 40% to 50% down looking on the scroll bar on the right.)
Add two lines to the code (width & height) so that it looks like this:
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
width:100%;
height:320px;
}
Don't forget the semicolons. And make sure you still have the close bracket at the end.
6. Now you can test your change before you save anything by pressing the "PREVIEW" button on the bottom of the page. If nothing pops up check to see if the new window is iconified.
7. If it works then press the "SAVE TEMPLATE" button and you are done. If it doesn't work check your typing to see if it exactly matches my example. You can also try pressing the "CLEAR EDITS" button and retype the changes. If nothing works just exit the browser--until you press SAVE TEMPLATE, nothing permanent is changed.
-- Vance
BeccA's Buzz
December 17, 2007I need help here. I have been through all of the html coding for my blog and I can tell you with certainty that I have NO 'header-inner' nor do I have a part 'header-wrapper'. Please help me, it's been messed up for a week almost and I have not idea how to fix this! I can't figure it out, everyone keeps saying alter these 2 sections, but I don't have those sections! Why did this happen out of the clear blue sky anyway? Thanks for your help!!!
Kathleen
December 19, 2007Hi Vance et al! Thank you for your advice from 12/16. I did it today and it worked. So, thanks so much. BUT.... the picture is left aligned vs. centered. Sorry if I am pressing my luck here, but do you know how I can make the photo centered in my header? THANK YOU!!!
Lawny
December 19, 2007kathleen you need to expand widget templates in your blog and look for header-inner and remove the value what says background-position: left; that should do it if you cant do it send me a copy of your template and i'll fix it for you
Kathleen
December 19, 2007Thank You, Lawny. Actually when I go into Edit HTML, the background position already says CENTER, not LEFT. I cut and paste here:
#header-inner {
background-position:center;
margin-left: auto;
margin-right: auto;
width:100%;
height:320px;
}
How do I email you my template? I tried to find your email address on your blog, but couldn't get it.
Thank you for all your help! I sincerely appreciate it! Too bad Blogger just didn't leave the header alone, then no problem! So, all I need to do is to center it. Thank You Again, Lawny!
VanceH-
December 19, 2007Hi Kathleen,
The "left" that is causing you problems is generated behind the scenes for your image and I don't think you can change it with your template. However, it looks like you can center your image by changing the width in the header-inner section you added from 100% to 35%. You'll then have a double text of your title. To eliminate that use the page elements editor--choose the image instead of the title and description option or remove your title text.
-- Vance
Lawny
December 19, 2007Vance it is within the template you need to tick expand widget templates and look closer at the code
Lawny
December 20, 2007Ive already helped fixed kathleen's blog header
marghe
December 21, 2007thanks!
I could finally fix my header problem!
Margherita
http://lolloplanet.blogspot.com/
Israelbriseno
April 27, 2008thanks for the fix. it work on my template. hope you post more help tips..
Israelbriseno
April 27, 2008though i still have one problem left on the image header. the image was shrunk to fit the header. how can i change it to the actual size of my image?
Nicole Roberts
May 28, 2008How do I get my header to be centered...it is driving me mad. Can you help?
Nicole
Lawny
May 28, 2008yes Nicole Roberts i think that you should look for the
#outer-wrapper and change it to the same width as you have set the header if that doesnt help let me know
Jennifer
May 30, 2008I recently switched to a 3 column template to try that out for a while. I have a banner I made for my previous template and I can't get it onto my new template. Even when I just try to add a picture, either behind the title or instead of the title, it never shows up. I looked in my html code and can't find any header wrapper info. What am I doing wrong? Thanks!
Lawny
May 30, 2008Jennifer i had a look at your blogs source code it seems that you have a background property applied to the h1 tag and the #header you should remove the background hex colour code and add this line of code somewhere within the header
#header {
background:url("http://yourHeaderimage.jpg") no-repeat center;
}
you may need to tweak the above code depends where you want the image e.g center, left or right
hope that helps if not let me know and i will try fix it for you
Anonymous
June 22, 2008is the pixels matter?
what is the ideal pixel 4 the header?
thx
Jeffrey Lee
November 29, 2008the image cant shrink dude
Lawny
December 08, 2008@jeffreyguys
the post you are reading is outdated and the code may of changed dont worry i will write a new one soon by the way what is your blog url and what are you trying to do with your blogs header ??
NickyHeavenS
June 05, 2010Hi ~ im having a problem with the header , i cant seems to view my photo at my blog there ? HELP !!! i try to re-upload it , and its still the same result ??? if anyone can help me out please ~ http://nickyheavens.blogspot.com/
Leave a Reply
Comments are moderated before appearing on site, comments that contain suspicious information, self-advertising or spam-like URLs will be deleted.
Note: only a member of this blog may post a comment.