Add Background Picture to Header in CSS. ~ Dummies Guide to Google Blogger Beta

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

REMOVE HEADER PICTURE

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 Blogger.com 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.

ADD PICTURE AS BACKGROUND

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 Photobucket.com 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 Blogger.com 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 {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background:url(LINK_OF_PICTURE) no-repeat;
height:200px;
}

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.

9 comments:

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

sincerely; 3/27/2008 12:21 PM
Vin said...: Vian,

As far as I know it cannot be done. Why not permanently change color of text font in the Template Code box?; 3/27/2008 4:18 PM
Freedom & Liberty said...: Thanks for the help. Blogger keeps bugging constantly about the header. Glad you found a simple solution for my impatient mind.; 3/28/2008 4:37 AM
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?; 3/30/2008 9:40 PM
Vin said...: Alannah Ryane,

Try clearing the cache.; 3/31/2008 6:49 AM
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.; 5/02/2008 12:16 AM
Vin said...: Sturgie,

Your picture width is 430px. While your header size is 740px - same as width of 'outer-wrapper'.; 5/02/2008 5:45 AM
BJ said...: Vin

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.

BJ; 5/03/2008 11:20 PM
Vin said...: BJ,

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.; 5/04/2008 8:05 AM