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
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfBOjBKwv-YgEO6e51-5uoh7ZaSeGmi4KPymhU0QYjr9jG1iIKuZK7bcANi46f7U8vQcGQrRCUhcdV0zA7w3CMGlXxlHNmPG-LgByezdA_to3SIZPeej7M5CHApi8f1zDeD13N2zC3LGgx/s400/header+background.jpg)
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;
}