Blog Header Shrunk

REMOVE THE ORIGINAL IMAGE

The first step is to remove your shrunk image. For this login at Blogger.com and click on Layout link on the Dashboard. On the Page Elements tab which opens click the Edit link on the Blog Header widget. In the popup window remove the image and save.

UPLOAD IMAGE OR GET IT'S LINK

Upload your image to a free host like Photobucket.com or Googlepages and copy down it's link. 

MODIFY THE CSS CODE

The last step is to modify the CSS code in your template. For this login at Blogger.com and click on Layout link on Dashboard. Then click on Edit Html subtab of Template tab. Scroll down in template code box to this code :

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

Add the following lines to it :

background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;

So that it looks like this :

#header-inner {
background-position: center;
background-image:url(LINK_OF_IMAGE);
background-repeat:no-repeat;
height:300px;
margin-left: auto;
margin-right: auto;
}

Replace LINK_OF_IMAGE with actual link of your uploaded image. Click on Preview button at bottom of Template box to increase the height from '300' if necessary. If full width of picture is not seen add the width line below the height line in the above code like this :

width:400px;

Again use Preview to see and adjust the width. Save Template. Clear the cache and view Blog.

IF YOU HAVE A 'STRETCH' TEMPLATE

If you have a stretch template use this code :


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
width:XXXpx;
height:YYYpx;
}


Change XXX and YYY to the width and height respectively, in pixels, of your image.