Ever since Blogger introduced uploading of pictures to the header through the Header Page element bloggers have been struggling with the arrangement of the picture in the header. In the upload dialog box Blogger gives the option of arranging the picture behind the Title and Description or in front of it.

However after the picture has uploaded there is a problem in centering it. One solution is to resize the picture width to match the width of the header-wrapper. This works for templates in which the whole blog occupies the middle of the screen. But for the STRETCH templates there is another solution.

Also many bloggers want an arrangement in the header so that the picture is on the left and the Title and description is on the right. One way to do this is to use tables to customize the header and another way is...............


CENTER HEADER IMAGE

To upload image or picture to blog header you must first have the picture file ready on your PC. You can create this in an image editor, at an online header generator site or download it from a free clipart/graphics site. Just Google to find them.


Login at Blogger.com and click on Layout link on Dashboard. On the Page Elements tab which opens click the 'Edit' link in the header widget. Click 'Browse' button to select the picture file on your PC. Click Upload after choosing to have it in front of the title or behind it.


Then after image is successfully uploaded click on Edit Html subtab of Template tab. Put a check in the check box to expand widgets templates at the top of the template box. Scroll down to the header widget code in the body of the template. You will see that the image code lies within a special div :

To center this image in a STRETCH template like the Sand Dollar Template or the Stretch Denim Template you have to add this code to the CSS Part of the template :


#header-inner {
width:770px;
margin:0 auto;
}

Give it the width of your image and Preview and then Save Template. Clear Cache and View Blog. You will see the image centered like this :



IMAGE TO LEFT and TITLE TO RIGHT

To add a Logo Image to the left or right of the header with the title and description occupying the rest you have to upload an image smaller than the width of your header. If it is not a STRETCH template the width of the header can be found by looking at the CSS code for the outer-wrapper. For this go to Edit Html subtab of Template tab and scroll down to :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

Here the width is 660 px in a Minima template. So select an image which is about 300 px in width or less and upload it to your header. Choose to position it behind the title and Description. Then switch to Edit Html subtab of Template tab and put a check in the Expand widgets template check box to show the full header code. To shift the image to the left change this code :

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

TO THIS :


#header-inner {
background-position: left;
width:650px;
}

Then to change the position of the title to the right change this code :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

TO THIS CODE :

#header h1 {
margin:0 5px 5px 300px; <-----Change last number ............ }

The 300 px is the left margin and you can increase this number to push title away from left margin. Use the Preview button to adjust the position. To push the description away from the left margin change this code :

#header .description { margin:0 5px 5px; ......... } TO THIS CODE : #header .description { margin:0 5px 5px 500px; <-----Change last number ........ }

Again you can use the Preview button to adjust the exact position of your description. See the picture below of the new header with a sample logo/picture to the left and the title and description to the right :