JSFiddle - React, Tailwind, and code Playground

by Thomas ZILLIOX

HTML

<div id="backg">
    <span class="mark" data-markposition="75,75">A</span>
    <span class="mark" data-markposition="25,75">B</span>
</div>

CSS

#backg {
    height: 0;
    background-image: url(http://davidwalsh.name/demo/background-size-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}
.mark {
    position: absolute;
}

JavaScript

function responsiveMark(containerId, width, height) {
    var containerElement = document.getElementById(containerId);
    if (containerElement) {
        containerElement.style.paddingTop = height/width*100+'%';
        var markElementList = document.querySelectorAll('[data-markposition]');
        for (var i=0; i<markElementList.length; i++) {
            var position = markElementList[i].getAttribute('data-markposition').split(',');
            if (position.length == 2) {
                var left = position[0];
                var top = position[1];
                markElementList[i].style.top = top+'%';
                markElementList[i].style.left = left+'%';
            }
        }
    }
}

responsiveMark("backg", 500, 200)