How to make a responsive image with clickable areas?

Question

I'm trying to create a background that has the image of a door, and I want the door to be clickable to 'enter'. I've gone back and forth with maps/areas/coords, and CSS background... and just can't find anything that scales right when the viewport is smaller. Please help!

body {
  width: 100vw;
  height: 100vh;

  position: relative;
  background-image: url("Images/turquoise-door.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  /* Adjust the background-size and background-position for smaller viewports */
  body {
    background-position: 84% center; /* Position the image to the right */
  }
}

#anchorDoor {
  border: 1px solid red;
  height: 50%;
  width: 30%;
  position: absolute;
  left: 50%;
  top: 40%;
}

Answer 1

https://i.stack.imgur.com/T3zFj.jpg

<svg width="100%" viewBox="0 0 720 720" xmlns:svg="http://www.w3.org/2000/svg">
  <image width="720" height="720" xlink:href="https://i.stack.imgur.com/T3zFj.jpg" />
  <rect id="MyDoor" fill="blue" opacity="0.4" x="300" y="340" width="100" height="200" onclick="alert('You have clicked the door.')" />
</svg>