How do we make the header image fit Image header area?

Header image will not always fit the header image area if we don't have the image size that suits the blogger header image area. In order to make the header image fit the header image area, we need to resize the image that suits the blogger template.

But sometimes, even the resize image upload will not work as well. So, its better to tweak the template HTML code inorder to solve this.

Let us see what are all the changes we need to make on template HTML code.

1. Go to -> Dashboard -> Template -> Edit HTML

2. Search for the below code.

<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>

3. Update the above code with height and width values as shown below.

<img expr:alt='data:title' expr:height='data:height'
expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl'
expr:width='data:width' style='display:block; height:auto; width:100%;'/>

4. Save the Template and View blog to see the changes.

Now the header image should fit the header image area.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.