How To Change/Replace Blogger Header With Background Image

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.

Enjoyed This Post? Subscribe For More Update!

Follow @realcombiz