How to put a link in a background-image?

Question

I have a div that has these characteristics:

div#circulo{
 height:200px 
 width:200px
 background-image: url(minhaimagem.png);
 background-size:200px;
}

The image that this is is a centralized circle, with the transparent background. So in my html I put for the div be a link, this way:

<a href="proximapagina.html"><div id=circulo>...conteudo...</div></a>

Only the clickable area was, as expected, in the whole square of the image. It has to make the clickable area only the internal circle??

Answer 1

Option 1

Put a border-radius on the link:

a{
   border-radius: 50%
}

Note: The dotted area is the "clickable area" of anchovy

DEMO

a div {
  width: 120px;
  height: 120px;
  background: #09f;
  border-radius: 50%;
  line-height: 120px;
  text-align: center;
}
a{
  display: inline-block;
  border: 1px dashed #333;   
  padding: 4px;
  width: auto;
}
a.com {
  border-radius: 50%;
}

<h2>Sem o border-radius no link</h2>
<a class="sem" href="proximapagina.html">
  <div id=circulo>...conteudo...</div>
</a>

<br><br>

<h2>Com o border-radius no link</h2>
<a class="com" href="proximapagina.html">
  <div id=circulo>...conteudo...</div>
</a>

Option 2

Use a map:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Flag_of_Japan.svg/290px-Flag_of_Japan.svg.png" usemap="#Map" />
<map name="Map">
    <area alt="" title="" href="#" shape="poly" coords="146,154,124,150,103,136,91,115,88,88,96,66,110,51,129,40,154,39,176,48,188,56,199,72,204,97,200,118,188,136,167,150,122" />
</map>

In the above case I created a Shape with the coordinates corresponding to the circle present in the flag of Japan. There is also the option shape="circle", but this you can explore more in depth.

It is applied to images and, although the creation may seem complicated, there are some applications for it, such as Dreamweaver itself and websites like this.