Add Background Picture to Header in CSS.

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.




Read more: http://www.blogdoctor.me/2008/03/add-background-picture-to-header-in-css.html#ixzz1JwRRyb9i

Related Posts Plugin for WordPress, Blogger...