RealcomBiz
Pin It

How To Change/Replace Blogger Header With Background Image

by Durodola Ridwan | Wednesday, July 18, 2012 | 2 Comments

This is the easy way to add a background image to your blogger header and exclude/hide the title from overlapping on your image, if you are using a picture window template read how to replace blogger header with image in picture window template because the header tag in picture window template is a bit different from others.

How To Replace Blogger Header With Image
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Use ctrl F to find header-wrapper tag, it will look like the code below
#header-wrapper {width:600px;margin:0 auto 10px;border:1px solid $bordercolor;}

The width of your blog may differs from width:600px;
  • Now to prevent your blog title from overlapping on your image simply add display:none; behind the close bracket of the code above as shown below
#header-wrapper {width:600px;margin:0 auto 10px;border:1px solid $bordercolor;display:none;}
  • Now, to replace your header with image, find the code below
<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='your header title' type='Header'/></b:section></div>
  • Paste the following code after the code above
<a href="ENTER YOUR BLOG URL"><img src="ENTER YOUR IMAGE URL" alt="Home" /></a>
  • Replace ENTER YOUR BLOG URL with your blog url/link
  • Replace ENTER YOUR IMAGE URL with the url of the image you want to use in place of the header, read how to host image on blogspot if you don't know how to get the direct url of your image
  • Preview your changes if there is anything you need to adjust, and click "SAVE TEMPLATE" when you are done with your editing.
That's all, share this post with friends/followers and subscribe to this blog now, for you to receive all our latest post update directly into your email.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

2 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. These instructions might be out of date because my html code does not inclue a header-wrapper.

    ReplyDelete
  2. Thanks for the information you provide, very useful for newbies.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger