Adding a Header Image in a Blogger Using CSS

You can change the CSS code of your blog using Blogger's built-in HTML editor. This allows you to completely customize the design and look of your blog, including adding your own image header. Your header image must already exist as an online image with a URL address in order to place it within the CSS code of your Blogger layout.

See Below Instructions to construct the whole scenario.
1. Log in to your Blogger account and click "Design" next to the blog you want to edit.

2. Click the "Edit HTML" link from the top toolbar.

3. Locate the "Header" section of the code in the text box. You will see "/* Header" at the beginning of this section.

4. Highlight the following code, right-click and select "Copy."

header {
width:500px;

margin:0 auto 10px;

border:1px solid #ccc;

background: #fff URL(URL) no-repeat top right;

}

5. Right-click inside the text box in the header section and click "Paste." This will place the code into your CSS template.

6. Replace the "URL" in the code with the URL address of your banner image. You can also change the number next to "width" to fit the width of your banner if needed.

7. Click "Save Template" to complete the changes. Your banner will now display within the header section of your Blogger blog.