I'm trying to create a map that responsively aligns hyperlinks over an (always) full-screen background image.

I've tried SVG's, but that didn't work for this reason.

So now I'm trying to use absolute positioning, so that the x/y AND height/width of the container (and therefore the little 'truffle' buttons) match the respective parts on the background image.

Below is the image, with the 'truffle box' that needs to align above the entire truffle tin (upper screen included)

Instead, what I've got is this (you can see, the viewport might be changing, but since the image isn't yet decreasing in size, neither should the 'truffle box' element):

Below is the code I'm using for the TruffleTin, to make it responsively maintain the x/y position, but I have nothing for it's height/width.

import React, { useEffect, useRef } from 'react';
import {
  TruffleTinContainer,
  TruffleTinOutside,
} from '../truffle-tin/styledTruffleTin';

export default function TruffleTin({ backgroundRef }) {
  const truffleTinRef = useRef();
  const initialPos = { x: 150, y: 150 };
  const padding = 25;
  let truffleBoxWidth = 0;
  let truffleBoxHeight = 0;

  useEffect(() => {
    truffleBoxWidth = truffleTinRef.current.offsetWidth;
    truffleBoxHeight = truffleTinRef.current.offsetHeight;
    resize();
  }, []);

  function resize() {
    let backgroundDivRect = backgroundRef.current.getBoundingClientRect();
    truffleTinRef.current.style.left =
      (initialPos.x / truffleBoxWidth) * backgroundDivRect.width -
      padding +
      'px';
    truffleTinRef.current.style.top =
      (initialPos.y / truffleBoxHeight) * backgroundDivRect.height -
      padding +
      'px';
  }

  useEffect(() => {
    window.addEventListener('resize', resize);
    return () => window.removeEventListener('resize', resize);
  });

  return (
    <TruffleTinContainer ref={truffleTinRef}>
      I'm the truffle tin
    </TruffleTinContainer>
  );
}

And here is what the image is, it's a div with a background image:

export const BackgroundLightsOn = styled.div`
  position: absolute;
  background: url(${BgLightsOn});
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
  border: 1px solid red;
`

Any help would be greatly appreciated. I've looked at countless 'suggestions' for this, but nothing has worked thus far. I'm kind of under the gun here, so the most straightforward and effective answer would be the best! Thanks very much.