Add Background Picture to Header in CSS. ~ The Blog Doctor.

Add Background Picture to Header in CSS.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

In Blogger you can directly upload a picture to the Blog Header. A few bloggers have been reporting problems with this method. Hence here is the old method brushed up for use with Classic or Layouts Template........


The first step is to remove the old picture. Sometimes the picture refuses to get removed. Then the first remedy is to clear the cache. Always use Firefox browser for optimum logging experience.

If clearing the cache does not help login at and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>

Change this to :

 <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='My Blog (Header)' type='Header'/>

Save Template. Switch to Page Elements tab. Click Edit link in the Blog Title widget. In popup window click Remove button.

Then click 'Add Page Element' link in the header. In pop up window choose 'Page Header' widget and choose the options and save. Here in the options you can add a new image or you can add it as in the next step.


If you want to add a picture that can be easily removed you can add it as a background in the CSS part of the template.

First create your header picture and upload it to Googlepages or and copy down it's link. Make sure that the width of the picture is the same as that of the header-wrapper. (See code in next step for width of header-wrapper) If the width is not the same the picture will protrude out on one side.

Then login at and click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :

#header-wrapper {
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(LINK_OF_PICTURE) no-repeat;

Add the background line as shown above. Replace 'LINK_OF_PICTURE' with actual link of your uploaded picture. Change the '200px' in the height line to the actual height of the picture. Save Template. Clear Cache and view blog.

The Blog Title and description will be shown on top of the picture. If you wish you can hide the Blog title and description to show only the picture.


Vian said...

Can you Help me Vin.?
I question this because I didn't find it on your helpful blog or I might have missed it.
" I've got difficulties in choosing the TEXT COLOR of my posts in the box post editor because the background of the text box editor is not the same as the background of my templates ( where the posts will appear after been published ). How to change the Background color of the Box of Text Post editor ( the box where we type our posts ) ? or I will be very thankful if you would show me how to change the layout of that page ( "publish a post" editor page ) thanks in advance ....


Vin said...


As far as I know it cannot be done. Why not permanently change color of text font in the Template Code box?

Freedom & Liberty said...

Thanks for the help. Blogger keeps bugging constantly about the header. Glad you found a simple solution for my impatient mind.

Alannah Ryane said...

You helped me to get all post title links on sidebar ..and today they are all gone? do you know what causes this?

Vin said...

Alannah Ryane,

Try clearing the cache.

STURGIE said...

How do I stretch my photo accros my header so that if fits perfectly? I try to edit my html and in the header portion I only find margin and padding. I don't know what the dimensions that are needed for my photo. Could you shed some light on this.

Vin said...


Your picture width is 430px. While your header size is 740px - same as width of 'outer-wrapper'.

BJ said...


I would like to change my header so that I could have four columns in the header where I could add pics of my grandchildren. Could you help me with this. I would really appreciate any help you could give.

Thanks for your help.


Vin said...


Use a Tables code with 4 columns and one row and paste the link of a picture in each cell. See How to Customize the Header.

José Quiroz said...

Hi Vin.
Is there any practical use for the $variables? I declared a $number variable, and it works OK, but i need to set its value later in the code (in the #header H1 section )using JS. I'd like to know at least if I can set the value with something like $number: 4; or $number="4"... I've tried all the combinations but it doesn't get the value... give me a hand mate!

Vin said...

José Quiroz,

As far as I have been able to discover the $variables are used only to make them available in a GUI form on the Fonts and Colors subtab of the Layouts tab.

What code did you use to declare the variable? What code did you use in the #header and what is the script code?

José Quiroz said...

hanks for your reply

Basically, I declare the variable in the definitions section like this:
Variable name="IdImage" description="Image Id" type="automatic"
default="7" value="7"
Later, I can use the variable in the #Header section like this:
#header h1 {
background:url("$IdImage.jpg") no-repeat;

where it succesfully trasnform the URL string to

So far it works OK, the next step for me is assigning a value to the
varable IdImage, theorically something like this:
IdImage: 8;
You name it, I've tried any combination but the variable keeps its
value from the declaration. If you can use the variable later, I guess
there should be a way in which you can assign a new value...

The final step will be using JS to assign a random value to the
varaible, so the picture in the header will be differente everytime
you refresh the page:

script type="text/javascript"
aleat = Math.floor(Math.random()*10);
(I had to remove the "<>" so the comment can be accepted)

This is not my main concern so far, as it should be easy to do as soon
as I descover how to assign the value....

Any clue?

my blog is

Thanks for your help! great job your doing there.

Vin said...

José Quiroz,

Good Idea! But there is already a hack for rotating images in the header.

I seem to have misplaced that link but if I get it I will send it to you.

José Quiroz said...

well... i really wanted to use the variables, let's see which trick you've got in your hat...

Vin said...

José Quiroz,

See here.

José Quiroz said...

Hi Vin.
2 things here. I know the trick, it has been on my personal webpage for more than a year (, but it didn't work on blogger and now I CAN see why. I was using document.write to write just the background line, but I reckon I need it to output all the header style section. Actually because mi images are on the same web directory and have the same name + number, I don't need to define an array. Will try to midify my code an I let you know. Big thanks for your help so far.

José Quiroz said...

Well, I didn´t realize one can put a style declaration later in the body. That was it! now is up and running, please have a look.

Xandre Lima said...

Hello! It Works! But I could not take the link function from the header... I've tried so many times in the css code, but nothing worked... Check my blog, when you roll the mouse over the header image, it works as a link, showing an awful grey color the same way the links do. How can I take off this link from the header image? Thanks!!!! :))

Vin said...

Xandre Lima,

Which browser and version are you using?

jhani said...

thanx... header problem solved with your post ... thanx

Simplysara said...

Hi Vin,
Pls see my blog I want to modify and want to make my blog look good, create drop down for dishes, extend the body, add picture to the header,actually i am not able to see the add and edit element page getting an error msg. thanks.

Vin said...


Tackle one problem at a time. What is the exact error message?

Donna Heart said...

Vin - I've tried everything you have suggested - clearing caches etc. another help page suggested making the opacity of the header space 0 - tried that, loaded my photo up to photobucket - no joyeither. I can get the image to load in a new blog - but not mine...

Vin said...

Donna Heart,

What is your blog address?

Kindle Marie said...

Vin, you are awesome! thank you sooo much!

I will buy you a drink anytime!


Just Some Dude said...

Thank you so much for solving this blog title problem for me. I was at my wits end, and you completely saved me.

Francien said...

Thank you very much for your prompt help Vin...i like my header for now...some recognized me in the but come Spring again someday i,ll change bothered me that it would not "go away" i know how to remove it.. its ok...thanks again!!
greetings Francien.

Selvi said...


Is this workable for "Sand Dollar Templates? I cant find coding for header wrapper. Help pls


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.