I am trying to overlay some HTML code over a website's image using <iframe> and CSS.

The website is a weather-monitoring website (which we've purchase btw), that I want to overlay with my own HTML code and image.

Is it possible to "hook" into one portion of the image with my own image? I want it hooked (so-to-speak, pardon my jargon), so the browser's resizing won't change it's layout and for it to also work on mobile device browsers.

This is the website I am referring to (sorry it's not a public accessible site).

I've managed to somewhat achieve what I want using this code...

<style>
  iframe {
    position: absolute;
    border: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
</style>

<div style="z-index:99;position:absolute;top:115px;right:352px">
    <canvas id="compass" height="230" width="230"></canvas>
    <asp:Label ID="lblDegrees" runat="server"></asp:Label>
</div>

<iframe id="iframe1" 
    src="https://asdjkhsdfjkhsdfjkh">    <-- internal website for above image
</iframe>

But as you've guessed, the top and right positioning is hardcoded to overlay that box in the right spot.

However, as soon as I re-size the browser or view it on a mobile device, the <canvas> element shifts to the right (or left or down) and the underlying compass dial shows from behind (somewhat partially obscured).

i.e.

There must be a better way to do this. Any ideas and suggestions?

Thanks