Getting Image Mapping to work in Theme Header

Hello forum heads.

I have beent trying my hardest to use image mapping to add a hyperlink to a logo on the following website. http://jimmysend.com

I have added the logo as a header background image. It’s the Lex logo sitting to the left of the menu.

In most descriptions of the image mapping process, the mapping is applied to an image in an image tag. I can’t seem to get it to work for a background image like this.

I tried adding the mapping ID to the header tag and then adding the map tag afterwards, so that my header looks like this:

<!-- #header -->
    <div id="header" class="element" style="background-repeat:no;
background-image: url('http://jimmysend.com/wp-content/uploads/2013/05/lex-logo-je-site-small-NEW.png');
margin-bottom: -2px;" id="_Image-Maps_3201305090545129"  usemap="#Image-Maps_3201305090545129" />
<map id="_Image-Maps_3201305090545129" name="Image-Maps_3201305090545129">
<area shape="rect" coords="753,0,788,40" href="http://lexprojects.com/" alt="Lex Projects" target="_blank" title="Lex Projects"    />
</map>
      <a id="logo" class="element" href="<?php echo esc_url(home_url('/')); ?>">
	<img src="<?php if (of_get_option('logo_image')) { echo of_get_option('logo_image');} else { echo get_stylesheet_directory_uri().'/images/logo.png'; } ?>" alt="Jimmy's End"/>
</a>
      <?php wp_nav_menu(); ?>
    </div>
    <!-- end #header -->

But it has no effect at all. I’ve no idea how to get round this. Not sure if it’s the theme or the use of a background image. If any of you have any ideas I would be hugely grateful. Thanks!
Dan