How to Add Image in Header Background

Introduction!

Blogger default templates don't have images in the header background. You can add one that suits your taste by changing some style sheet elements in your "Edit HTML" tab between <b:skin> and </b:skin>.

How to Do This???

Please note that following code is responsible for overall header appearance:

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

We can change this code by adding some additional tags. So, find the above code in your template style sheet and replace it with the following code:

#header {
width:660px; /* width of header in pixels */
margin:0 auto 10px; /* margin from other elements like posts and sidebar */
border:1px solid #ccc; /* width, type and color of header border */
background: #fff url(YOUR IMAGE URL) no-repeat top right; /* top right indicates background position */
}

You can do changes and see what happens in "Preview" mode. Just change "YOUR IMAGE URL" with actual URL of your image which you want to use as background. You can always try to search for more backgrounds on Google.

Tip!

Always save your template whenever you're not sure about what you're doing. You can do this by clicking on "Download Full Template" link in "Edit HTML" tab.