Making only picture clickable css/html inside header

Question

I'm working on a responsive website and I'm having an annoying problem. In my header is some text. And I set it offscreen with text-indent -9999px. After that I load a background image. But I want only the background image to be clickable. I don't know how to do this. I've found a few examples on google. But they never "inject" a picture with css. They always define the picture in the html.

So all that I want is a picture horizontally centered in the header and only the picture is clickable, not the margin around it.

<header>
<a href="alink">
<h1>this is gonna be replaced with an image(on desktop websites). It will stay here on mobile website</h1></a>
</header>

and the css:

header h1 {
margin:10px 0 30px 0;
text-indent:-9999px;
background-image: url('pika.png');
background-repeat: no-repeat;
background-size: contain;
background-position:50% 50%;
width:100%;
height:220px;
border:1px solid red;
float: left;
}

I've also uploaded the code to jsfiddle: http://jsfiddle.net/Cm3yQ/

As you can see, currently the whole h1 is clickable, and I want only the picture to be clickable.

Answer 1

<edit>

Possibilities to have only image clikable are:

1. the use of img + map + area
2. or the use of SVG. one random tutorial : http://tutorials.jenkov.com/svg/a-element.html Average example of what can be done : DEMO

</edit>

---

You should wrap link inside h1, and give it a display:block.

header {
  background:url(http://lorempixel.com/400/150);
  /* background could either be on h1 or a */
  background-size:cover;/* optionnal */
}
header, h1 , h1 a  {/* size them all at once */
  display:block;
  height:300px;
}
a {
  text-indent:-9999px;/* hide text from screen */
  /* still not working ? set background here or give it a color 
  almost transparent so it can catch click event : 
  background:rgba(0,0,0,0.001);*/
}

and HTML :

<header>
  <h1>
    <a href="#"> SOME text </a>
  </h1>
</header>