We created this Blog using the new beta Blogger template. At that time, there was no easy way to insert images into the Blogger Header. We had therefore written an article on inserting a Banner or Picture Link in the Blogger Header. Recently, Blogger introduced a new feature in their templates, allowing owners to upload pictures into their Blog Headers. This background image to the Blogger Header can either be behind the title and description, or be a substitute for the title and description. There have been a number of queries raised concerning the Header image alignment. In a number of cases, the pictures are either not centered, or cannot be moved to the left or right of the Header. For those who have been facing problems, we hope this article can help you have more control over the image position. We shall explain how we manage to move the Header images in the different types of Blogger templates.

We think the main problem is that while Blogger has inserted standard commands into their templates involving a new id='header-inner', this new id selector has not been defined in the stylesheets. What we did was to insert a style for 'header-inner' in these templates to fix the position of the Header background image. For completeness, we shall also discuss how the title and description can be centered or aligned to one side of the Header.

To clarify, if you have chosen to have the image appear “Behind the title and the description”, the title and description follows the image wherever it goes. Should you want the title on the left side of the Header and the image on the right side, the easiest way is for you create a wide image using an image editor, put in the title and save it as one composite image. In this way, the title and description are exactly where you want them to be. Upload that image onto your Header, and for the Placement, choose “Instead of title and description”. Alternatively, you can also use the other method discussed in our Banner or Picture Link article.

Remember to click “Preview” after changes are made to the template. Only after you are satisfied with the settings should you click “Save Template.”

Minima Template

In the Minima Template, the Title and Description are automatically aligned to the center. If you want them to be on the left of the Header, change the alignment code (shown in red):-

#header { text-align: left;

You can have them on the “right” too, instead of alignment to the “left” or “center”.

The Header image that is uploaded also stays in the center of the Header. If you want it to be further right for instance, scroll to these lines and change the “auto” in the left margin to a fixed width:-

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

For the image to be on the extreme right of the Header, you can change the right margin to 0px:-

margin-left: auto; margin-right: 0px;

Denim Template

The Denim Title and Description are on the left of the Header. To have the Header title in the center, insert the alignment code (shown in red):-

h1.title { text-align: center;

For the Description to be in the center, add the alignment code (in red):-

#header .description { text-align: center;

As for the Header image, it is aligned to the left. To move the image to the center or right, locate /* Header */ and paste this code under it.

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

Similarly, if you want the image to be closer to the right, insert a determined left margin instead of leaving it “auto”, like this:-

margin-left: 200px;

The image can also be on the far right of the Header if you set the right margin to 0px:-

margin-left: auto; margin-right: 0px;

Rounders Template

The Title and Description are automatically aligned to the left. You can have the Header Title in the center by adding this code (shown in red):-

#header h1 { text-align: center;

For the Description to be in the center, you can insert the alignment code here:-

#header .description { text-align: center;

Should you want a particular position for the Title and Description, you can also set left margins instead, for e.g.,:-

#header h1 { margin-left: 200px;

The uploaded image in the Header is aligned to the left. You can have the image in the center by adding this under /* Blog Header */

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

To move the picture towards the right, change the “auto” in the left margin to a fixed value like this:-

margin-left: 200px;

You can have the image on the right by setting the right margin to 0px:-

margin-left: auto; margin-right: 0px;

Herbert and Jellyfish Templates

Both the Title and Description are by default on the left. If you want to shift them to the center of the Header, add this code (shown in red) to shift the Title:-

h1 { text-align: center;

and the Description:-

.description { text-align: center;