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>

Answer 2

it may look like a comment but i dont have enough reputations to put comment ,hence am putting it as an answer.

Why dont you create another div in the html and put your image inside it ,then style it accordingly.

Answer 3

HTML

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

Css

.headerDiv{
 border:1px solid red;
 height:220px;
 width:100%;    
}

header h1 {
 margin:10px 0 30px 0;
 text-indent:-9999px;
 background-image:      url('http://img3.wikia.nocookie.net/__cb20120630141813/sims/images/d/d7/Pichu.gif');
 background-repeat: no-repeat;
 background-size: contain;
 background-position:center; 

 height:220px;
 // float: left;    Get Rid of float: left
}