Replacing header image with .html URL?

Replacing header image with .html URL?

I am using a template that uses an image in the header. I wanted to replace this image with my own, so I created an image to replace it. Works fine. All I did was replace images/header-bg.jpg with my own. However, I wanted to add image maps that would link to other pages on my website.

So what I did is I created a header-bg.html, uploaded to the main directory (not images file) and changed the below code to header-bg.html. But I found out I can’t reference “background” to an .html extention. So what is another way of doing this?

In the style.css file, this is the original code:

/* header area */
#header {
background: #FFFFFF url(images/header-bg.jpg) no-repeat;
height: 197px;
border-bottom: 1px solid #c3c1bf;
position: relative;
}
#headerimg {
position: relative;
padding: 30px 0px 0px 40px;
height: 60px;
}
#headerimg .description{
position: absolute;
left: 110px;
bottom: 3px;
color: #c9eefe;
font-size: 14px;
}