how do i make the background image the seleciton/hovering/trigger area for my <a> link

I want to know how I can make the background image of something the selection area because my background image is a triangle and I want the selection area to be a triangle. (CSS)

example:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>h1{background-image: url(image.png)}</style>
<body>
<h1><a href="something.com">Hello</a></h1>
</body>

</html>

i want that image.png to be the hovering/selection/trigger area for that link, i want this because i have a triangle as a background image and i want the hovering area to be a triangle as well.

Solution

If it MUST be a background image, there are good answers to this similar stackoverflow question here:

How using usemap in div background url

If it doesn't have to be a background image, you could simply use the usemap attribute on the img tag.

<img src="ProjectDetail.jpg" usemap="#image-map">

<map name="image-map">
<area target="" alt="" title="" href="" coords="609,512,222,514,411,135" shape="poly">
</map>

Here's a fun generator to help with mapping coords:

https://www.image-map.net/

I hope this is useful, cheers.