How to Add Background Image to Blogger Header

Part 1: Revision of Blogger Header

In previous Blogger tutorials, we learnt how to customize the Header. However most people prefer a more attractive Header banner or logo at the top. The best method is add a background image to the Header. Let's see how to do it in this series of Blogger tutorials.

Revision of Blogger Header

Let's take a look at the header again:

Blogger add Header Background Image

The outer border line of Blogger Header is set by the border property of #header-wrapper. Setting the border to zero will remove the outer border line.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

The inner border line of Blogger Header is set by the border property of #header. Setting the border to zero will remove the inner border line.

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

We mentioned in previous tutorial that there is no height property set to the #header-wrapper. Therefore this is quite difficult to master the size and position of the background image. Actually many blogger found that the background image do not align to what they wish. Moreover many background images are also distorted due to the resize. Many Blogger tutorials told you to do this by trial and error.

We never do this by trial and error. Let's see how to add the background image to Blogger Header fully under our control.