Add Background Picture to Header in CSS
Saturday, August 29, 2009
REMOVE HEADER PICTURE
click 'Layout' link on Dashboard. On Page Elements subtab click 'Edit Html' subtab at top. In Template Code box scroll down to this code :
Change this to :
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.

0 comments: to “ Add Background Picture to Header in CSS ”
Post a Comment