How to Add Background Image to Blogger Header

Part 3: Prepare background Image and Add to Blogger Header

Since the size of #header-wrapper is 660 pixels in width x 150 pixels in height, we need to prepare an image with the same size.

Prepare a background image:

Prepare a background image (660 pixels x 150 pixels) for the Header with any photo software. In order to allow you to see the process easily, we made a very simple Header image with a rather light color. Here's your Blogger Background image:

Blogger Header Background Image

Add the Background Image to Blogger Header:

The background image will be set in the #header-wrapper. To do this, add the background-image property to #header-wrapper

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

Note:
When edit in Blogger website, you should use the background-image proprty like:

background-image: url(http://YourImageLoc.com/bg-image-660-150.jpg);

The background image should align perfectly since the size of the image is exactly the same as the size of Header Wrapper. The result is shown as the picture below:

Blogger add Header Background Image

This Blogger tutorial shows how to set or add a background image to Header.