BloggerTips: How to align header image in Blogger?

If you wanted a header image (banner) for your Blogger blog and you had uploaded one but it is not aligned correctly, then do the following, like I tried today.

Where to upload Blogger Header Image?
You can upload Blogger Header Image at Blogger Dashboard > Layout > Header Widget > Edit. From here you can upload new or remove existing header image. You can also opt to show site's description and title.


Aligning Blogger header image

To align, a short piece of CSS Code is all you need to be added to the Blogger HTML Template code or you can also add it to "Add CSS" in Blogger > Template > Customize > Advanced > Add CSS

To edit Blogger's HTML template, go to Blogger > Template > Edit HTML > Click anywhere inside the template code area > CTRL+F  > ]]></b:skin>


If you have opted for "Behind title and description” option:
Copy and paste the code below just before ]]></b:skin> or add it to last line if you are doing it from "Add CSS"

For right align:

#header-inner {background-position: right !important; width: 100% !important;}

For center or left, just replace the text "right" in the code above with "left" or "center".

If you have opted for “Instead of title and description” or “Have description placed after the image” option 

For Center Align:

#header-inner img {margin: 0 auto !important;}
#header-inner {text-align:center !important;} /*include if  using Template Designer*/

(courtesy: http://www.bloggersentral.com/)

For Right Align:

#header-inner img {margin: 0 auto 0 250px;}

You can adjust the value "250px" appropriately as required to push the image to the left. To do this with a preview, use the "Add CSS" method to see a live preview as you do the changes.