Header Background

If you want to have a separate paper behind your header so that it appears to span the whole page you need to add this in the Html code.

On my original blog design I chose to have the same paper as the bottom layer of my header so it appears to be all one piece. But the header actually floats above it. (I have changed the header background paper so you can see the difference.)

The header itself is just uploaded via Blogger



Here is the whole of the header Html code on my blog=

/* Header
-----------------------------------------------
*/

#header-wrapper {
padding:0 2% 0px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYE75vS1Zkf1nJZ6O5QXKI0S5co2DAnp-nN9OeWe24tWcXzt_NysvexFcLJZQ5JbamlFx318dbt-YDHKSCtOgV5eWowWQGjvHjbsX4vn6mxtcby3XaOKTj1zA5EJH8g9JDHrAA20sPO6N/s660/KPertiet_KraftyElegance-7.jpg);
}

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

#header-inner {
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}