JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<div id="demo"></div>

CSS

div {
    height: 500px;
    width: 500px;
    margin: 0 auto;
    background: #fff url(http://placekitten.com/300/300) 21% 150px no-repeat;
}

JavaScript

var demo = document.getElementById('demo'),
    _tmp = window.getComputedStyle(demo,null).backgroundPosition.trim().split(/\s+/),
    positions = {
        'left' : _tmp[0],
        'top' : _tmp[1],
        'numbers' : {
            'left' : parseFloat(_tmp[0]),
            'top' : parseFloat(_tmp[1])
        },
        'units' : {
            'left' : _tmp[0].replace(/\d+/,''),
            'top' : _tmp[1].replace(/\d+/,'')
        }
    };
console.log(positions, positions.left, positions.top, positions.numbers.left, positions.numbers.top, positions.units.left, positions.units.top);