<edit>
Possibilities to have only image clikable are:
- the use of
img
+map
+area
- 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>