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

html, body {
    width: 100%;
    height: 100%;
}
#backg {
    width: 100%;
    height: 100%;
    background-image: url(http://davidwalsh.name/demo/background-size-1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
}
.mark {
    position: absolute;
}

JavaScript

var markList = document.querySelectorAll('[data-markposition]');
for (var i=0; i<markList.length; i++) {
    var position = markList[i].getAttribute('data-markposition').split(',');
    if (position.length == 2) {
        var left = position[0];
        var top = position[1];
        markList[i].style.top = top+'%';
        markList[i].style.left = left+'%';
    }
}