[Dilettante_Pro]

Для начала - только url.
Можно попробовать этот: "https://javascript.ru/cat/list/donkey.gif"

<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>
<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=''>);</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='backpx' type='number' min='0' max='100' id=''>%</label></li>
          <li>Top <label><input id='backpx' type='number' min='0' max='100' id=''>%</label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-size: </p>
        <ul>
          <li><label><input id='backpx' type='number' id=''>px</label></li>
          <li><label><input type='radio' id='' name='size'>cover</label></li>
          <li><label><input type='radio' id='' name='size'>repeat</label></li>
          <li><label><input type='radio' id='' name='size'>no-repeat</label></li>
        </ul>
      </div>

    </div>

    <div class='col-lg-6'>
      <div id='back'></div>
    </div>

  </div>
</div>
<script>
document.querySelector('input[type=text]').onchange = function() {
    document.querySelector('#back').style.backgroundImage = 'url(' + this.value + ')';
}
</script>