How to fix a button on an image background, and to keep it there upon resize?

Question

What I would like to achieve is to add a tag on peoples faces on my website. I know the image map property, but the problem is that the background of the main Div has to be set to 'cover'. But when the window is resized the coordinates of the button remains the same, so the faces gets smaller of course, while the button will cover the wrong people.

I was trying to find a way, but nothing comes in mind how to get this done. Thanks!

sample code:

    var box1Top = 200;
    var box1Left = 400;
    var oldWindowWidth = $('body').width();
    var oldWindowHeight = $('body').height();

    $(window).resize(function() {


    var newWindowWidth = $(window).width();
    var newWindowHeight = $(window).height();


    box1Left =  newWindowWidth * 400 / oldWindowWidth;
    box1Top =  newWindowHeight * 200 / oldWindowHeight;

    $('#box').css({left: box1Left, top: box1Top});

    console.log(box1Left + "w" + newWindowWidth);


    // location.reload();
    });

Answer 1

Just set the coordinates in percentages.