Support » Themes and Templates » 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;

Viewing 3 replies - 1 through 3 (of 3 total)
  • Let me clarify – what I am trying to do is replace the .jpg image in the template header with my own header, which is .html. I assume I could modify the header.php file, which has this code in the body??

    <div id=”page”>
    <div id=”header”>
    <div id=”headerimg”>
    <h1>/”><?php bloginfo(‘name’); ?></h1>
    <div class=”description”><?php bloginfo(‘description’); ?></div>
    <ul id=”nav”>
    <li class=”page_item”>/” title=”Home”>Home

    <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?>

    <!–/header –>

    If this is correct, what would I need to change?

    Or is there another file I need to modify?

    sorry for the various follow up posts but I can’t find the edit button.

    What I want is to change the .jpg graphic displayed at the top of my blog at:

    with this .html here:

    The difference between the two is that the second one has image maps on the text and allows a user to click on them to get to other pages on my website.

    Any ideas on how I accomplish this?

    You are over-complicating it.
    For such a simple thing like that blue line with some text in it you don’t need any image map. Do it in html/css.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Replacing header image with .html URL?’ is closed to new replies.