add an image to blogs header

Today another friend of mine at blogcatalog asked me how to add an image to the blogs header so I'm going to show you how to add an image to the blogs header just like mine now there is two ways you can do it the first you may already know so for those who don't know go to your page element tab and look for the following edit link highlighted in red

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 {

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”

Thanks Jamiz...I did it!

Hi! Jamiz, thank you for the link to this page. Great tip!

Hi! 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.

Peter McCartney
Sydney Australia

I 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??

(I removed the code)

Hey, it dint work for me :(

its looks the same when i added the code thing


#header-wrapper {
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;

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
font: $pagetitlefont;

#header a {

#header a:hover {

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;

#Header1_headerimg {

/* Outer-Wrapper
----------------------------------------------- */



We 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.

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.

My template must be different. I had to use the code below and adjust the height appropriately.

#header-inner {width:100%;

Thanks for the tip though, it got me on the right track.

Hello 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 (Buddhafly)


Hi 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;

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

I 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!!!

Hi 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!!!

kathleen 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

Thank You, Lawny. Actually when I go into Edit HTML, the background position already says CENTER, not LEFT. I cut and paste here:

#header-inner {
margin-left: auto;
margin-right: auto;

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!

Hi 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

Vance it is within the template you need to tick expand widget templates and look closer at the code

Ive already helped fixed kathleen's blog header

I could finally fix my header problem!

thanks for the fix. it work on my template. hope you post more help tips..

though 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?

How do I get my header to be is driving me mad. Can you help?


yes 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

I 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!

Jennifer 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


June 22, 2008

is the pixels matter?
what is the ideal pixel 4 the header?


the image cant shrink dude

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 ??

Hi ~ 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 ~

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.

Copyright © 2019 All Rights Reserved | Privacy Policy | Disclaimer Design by LawnyDesigns | Powered by Blogger