Reposition Blogger Header Image

Previously I have written a tutorial on how you can resize your Blogger's header image. Here's the sequel to that tutorial, how to reposition your Blogger header image. As usual, there isn't a straight forward method to align/reposition Blogger's header image. Most users would want their images to be in the center, and some prefer either on the left or the right depending to the layout of their templates. It goes without saying that there are more than one way in which you can do this. In this tutorial, you will learn how to place your header at an exact location of your choice.

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

#header {
padding-left: 170px;
padding-top: 0px;
}

Increasing the left-padding will bring your image towards the right. Increasing the top padding will pull your image down.

Align to Center

If you want to center your header image, use the code below instead (either one):

#Header1_headerimg{
margin-left: auto;
margin-right: auto;
}

OR

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

OR (For image-less header)

#header-inner{
text-align: center;
}

Note: If you're using a heavily moded third party template, you might want to change the Header ID in the code above before attempting this tutorial. Have fun.