JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<img src="http://cisloandthomas.com/wp-content/uploads/2015/12/Shrunken-Banner-Wide-Ends-1140x200.jpg" class="background">
<div class="overlay"></div>

CSS

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, code,del, dfn, em, img, q, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
            body{line-height:1.5;}
            table{border-collapse:separate;border-spacing:0;}caption, th, td{text-align:left;font-weight:normal;}
            table, td, th{vertical-align:middle;}
            blockquote:before, blockquote:after, q:before, q:after{content:"";}blockquote, q{quotes:"" "";}
            a img{border:none;}

            .background {
                height: 100%;
                position: absolute;
                margin-top: -61px;
            }

            .overlay {
                position: absolute;
                background: red;
                -moz-border-radius:100%;
                -webkit-border-radius:100%;
                border-radius:100%;
            }

JavaScript

var resizeOverlay = function() {
            var l=515,
                    t=145,
                    $b=$('.background'),
                    $o=$('.overlay'),
                    o_w=25,
                    o_h=25;
            var b_h=$b.height();
            var ratio=$b.width()/2800;
            $o.css({
                left:parseInt(l*ratio,10)+'px',
                top:parseInt(t*ratio-61,10)+'px',
                width:parseInt(o_w*ratio,10)+'px',
                height:parseInt(o_h*ratio,10)+'px'
            });
            console.log('background_height',b_h);
        };

        $(document).ready(resizeOverlay);
        $(window).resize(resizeOverlay);