<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul li {
list-style: none;
display: inline-block;
}
.back_style {
font-size: 16px;
}
#back {
width: 267px;
height: 267px;
background-color: rgb(0, 0, 0);
display: flex;
position: relative;
}
.d-flex {
display: flex;
margin-bottom: 1rem;
}
.space-around {
justify-content: space-around;
}
.flex-column {
flex-direction: column;
}
</style>
<body>
<div class='d-flex'>
<p>background-image:</p>
<ul>
<li>url(<input type='text' id='bgImage' value="https://javascript.ru/cat/list/donkey.gif">);</li>
</ul>
</div>
<div class='d-flex space-around'>
<div class='mr-2'>
<h5>background-repeat:</h5>
<ul class='d-flex flex-column'>
<li><input type='radio' name='repeat' id='norep' checked><label for='norep'>no-repeat</label></li>
<li><input type='radio' name='repeat' id='repXY'><label for='repXY'>repeat</label></li>
<li><input type='radio' name='repeat' id='repX'><label for='repX'>repeat-x</label></li>
<li><input type='radio' name='repeat' id='repY'><label for='repY'>repeat-y</label></li>
</ul>
</div>
<div class='mx-2'>
<h5>background-size:</h5>
<ul class='d-flex flex-column'>
<li><label id='bnoradio'><input type='number' id='sizeIn' value='150' name='size' class='adstl bsize'> px</label></li>
<li class='bsckeck'><input type='checkbox' id='sizeOne' name='size'><label for='sizeOne'>cover</label></li>
<li class='bsckeck'><input type='checkbox' id='sizeTwo' name='size'><label for='sizeTwo'>contain</label></li>
</ul>
</div>
<div class='ml-2'>
<h5>background-position:</h5>
<ul class='d-flex flex-column'>
<li>Left: <label><input id='posX' type='number' min='0' max='100' value='50' class='adstl bsize'> %</label></li>
<li>Top: <label><input id='posY' type='number' min='0' max='100' value='70' class='adstl bsize'> %</label></li>
</ul>
</div>
</div>
<div id='back'></div>
<script>
var back = document.querySelector("#back"),
x = document.querySelector("#posX"),
y = document.querySelector('#posY'),
so = document.querySelector('#sizeOne'),
st = document.querySelector('#sizeTwo'),
si = document.querySelector('#sizeIn');
(style = () => {
back.style.background = `url(${document.querySelector("#bgImage").value}) black ${document.querySelector('[name="repeat"]:checked').parentNode.textContent} ${x.value}% ${y.value}%`;
back.style.backgroundSize = so.checked ? 'cover' : st.checked ? 'contain' : si.value + 'px';
})();
document.querySelectorAll('input').forEach(el => el.oninput = style);
</script>
</body>
</head>
</html>
Получилось))
Я слегка подкорректировал, в принципе и так нормально, но такие тонкости не все поймут, психанут и закроют страничку)
