А как такой вариант?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
label,
ul,
p {
margin-bottom: 0;
}
.back_flex ul li {
list-style: none;
display: inline-block;
}
.back_flex {
display: flex;
align-items: center;
margin: 15px 0;
}
.back_flex p {
margin-right: 15px;
}
#backpx {
width: 50px;
}
#back {
width: 267px;
height: 267px;
background-color: rgb(0, 0, 0);
display: flex;
position: relative;
}
</style>
</head>
<body>
<div class='container p-3'>
<div class='row align-items-center'>
<div class='col-lg-6'>
<div class='back_flex'>
<p>background-image:</p>
<ul>
<li>url(<input type='text' id='url' value="https://javascript.ru/cat/list/donkey.gif">);</li>
</ul>
</div>
<div class='back_flex'>
<p>background-repeat:</p>
<ul>
<li><label><input type='radio' name='repeat' id='' checked>no-repeat</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat-x</label></li>
<li><label><input type='radio' name='repeat' id=''>repeat-y</label></li>
</ul>
</div>
<div class='back_flex'>
<p>background-position: </p>
<ul>
<li>Left <label><input id='posX' type='number' min='0' max='100' value="0">%</label></li>
<li>Top <label><input id='posY' type='number' min='0' max='100' value="0">%</label></li>
</ul>
</div>
<div class='back_flex'>
<p>background-size: </p>
<ul>
<li><label><input type='number' id='size' value="30">px</label></li>
<li><label><input type='checkbox' id='size2' name='size'>cover</label></li>
</ul>
</div>
</div>
<div class='col-lg-6'>
<div id='back'></div>
</div>
</div>
</div>
<script>
var back = document.querySelector("#back"),
x = document.querySelector("#posX"),
y = document.querySelector('#posY'),
size = document.querySelector('#size'),
size2 = document.querySelector('#size2');
function style() {
back.style.background = `url(${document.querySelector("#url").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
back.style.backgroundSize = size2.checked?'cover':size.value+'px';
};
style();
[].forEach.call(document.querySelectorAll('input'), function(el) { el.onchange=style});
[].forEach.call(document.querySelectorAll('input'), function(el) { el.oninput=style});
</script>
</body>
</html>