How to fix your blogs header

Today im going to show you how you can fix your blogs header as lots of blogspot users have been having problems with their header image so i recommend you download a backup copy of your template or use a test blog now you will need to expand the widget templates and find the following code highlighted in the screenshot



it should be within the #header-wrapper when you have found it replace it with the following code

<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "REPLACE"'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id=' "headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "height: " + data:height + "px;"' id='header-inner'>
<div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
<b:else/>
<!-- Normal header No image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:include name='title'/>
</h1>
</div>
<b:include name='description'/>
</div>
</b:if>
</b:includable>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>



now copy following css code
(note: ive set the background position as centered you could change it to left or right if you wanted)
#header-inner {
background-repeat:no-repeat;
background-position:center;
}
#headerimg {
text-align:center;
margin:0 auto;
}


paste it in your template like so and save it



now add an image to the header throught the page elements tab also you might need to tweak the css code a bit it would be best to know the exact size of the image you are going to use so if the header image is wider than the #outer-wrapper it would spoil the layout it is just a matter of tweaking the css code and depends what layout you are using anyway i hope this works for most of you if not let me know and i will try and help you