How to Add Background Image to Blogger Header

Part 5: Remove the Outer Border Line and Inner Border

Do you like the two lines - Outer Border line and the Inner Border line?

Of course not! Let's remove them. Actually we already learned this in previous tutorial. Let's shown how to do it once again.

Remove Outer Border

It simply change the border of #header-wrapper from 1 pixel to zero

Change from:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
height: 150px;
background-image: url(images/bg-image-660-150.jpg);
}

to:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
height: 150px;
background-image: url(images/bg-image-660-150.jpg);
}

Here's the screen of Dreamweaver:

Blogger add Header Background Image

Remove Inner Border

It simply change the border of #header from 1 pixel to zero

Change from:

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

to:

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

The Dreamweaver screen is look like:

Blogger add Header Background Image

This Blogger tutorial shows how to remove the two border lines on the Header.