Insert an image on top of a background image in a div tag

  • Resolved runninggirl

    (@runninggirl)


    15 years, 5 months ago

    Hello!
    I have a navigation bar in the header.
    The background of the navigation bar is a graphic image. The links that go in the navigation bar “HOME (a small diamond image) CONTACT US” have special fonts and designs done in photoshop. I want to insert the above as an images in my navigation bar and then map the hotspots. Here is the code

    <div id=”topnav”><–topnav has a background graphic image!–>
    <img src=”images/homecontact.png”alt=”HomeContact” width=”120″ height=”9″ border=”0″ usemap=”#Map” class=”topnavigation” />
    <map name=”Map” id=”Map”>
    <area shape=”rect” coords=”0,0,30,12″ href=”#” />
    <area shape=”rect” coords=”50,0,142,12″ href=”#” />
    </map>
    </div>

    The result just gives me my navigation bar with the background image.
    It does not give me the links image on top, but just a small box with nothing.

Viewing 4 replies - 1 through 4 (of 4 total)

  • Have you resolved your image mapping issue?

    I’ve been attempting to add image maps to the header and I’m getting basically what you described.

    I’ve been working in the header.php file for the theme I’m using. I’ve also been making adjustments to the style.css’s #header and #headerimg settings but can’t get the hotspots to come alive in the header.

    I’ve been able to make the complete header a link but I need multiple spots in the header to link.

    Maybe we can help each other with what appears to be the same challenge.

    I figured it out. Below is what I did to accomplish it for anyone else that may be struggling with which files to edit and how.

    Two files are involved for the theme you are using:
    header.php
    style.css

    In header.php add the following at the bottom of the page after the <div id=”header”> tag:

    <div id=”header”>
    <i>Blog</i>
    <i>Log</i>
    <div id=”headerimg”>
    </div>
    </div>

    In the style.css add the following after #header:

    #header a {
    position: absolute;
    height:60px;
    top:20px;
    text-decoration: none;
    }
    #header a i{visibility: hidden;}
    a#home {
    left:350px; width:350px;
    }
    a#cabins {
    left:825px; width:150px;
    }

    You will obviously need to adjust the pixel distances so they hover over the content you want to be hot.

    I hope this helps someone else.

    Some of the code was messed up in the previous response. This time I used the code button to maintain the code.

    Two files are involved for the theme you are using:
    header.php
    style.css

    You would substitute your href’s and id’s you use for your hotspots.
    In header.php add the following at the bottom of the page after the <div id=”header”> tag:

    `<div id=”header”>
    <i>Blog</i>
    <i>Log</i>
    <div id=”headerimg”>
    </div>
    </div>

    In the style.css add the following after #header:

    #header a {
    position: absolute;
    height:60px;
    top:20px;
    text-decoration: none;
    }
    #header a i{visibility: hidden;}
    a#home {
    left:350px; width:350px;
    }
    a#cabins {
    left:825px; width:150px;
    }

    You will obviously need to adjust the pixel distances so they hover over the content you want to be hot.

    I hope this helps someone else.

    Thread Starter runninggirl

    (@runninggirl)

    Hello!
    I did resolve the issue.
    I was not able to view my navigation image on top of my header background. So i became more specific with the file path and it worked.
    Instead of
    <img src="images/homecontact.png"
    replace
    <img src="wordpress/wpcontent/thems/customtheme/images/homecontact.png"
    everything else reamins the same.
    Thanks for responding. I am going to experiment with your code also.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Insert an image on top of a background image in a div tag’ is closed to new replies.