[Nexus]

<div class='container p-3'>
<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='row align-items-center'>

    <div class='col-lg-6'>

      <div class='back_flex'>
        <p>background-image:</p>
        <ul>
          <li>url(<input type='text' name="backgroundImage">);</li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-repeat:</p>
        <ul>
          <li><label><input type='radio' name='backgroundRepeat' value="no-repeat" checked>no-repeat;</label></li>
          <li><label><input type='radio' name='backgroundRepeat' value="repeat">repeat;</label></li>
          <li><label><input type='radio' name='backgroundRepeat' value="repeat-x">repeat-x;</label></li>
          <li><label><input type='radio' name='backgroundRepeat' value="repeat-y">repeat-y;</label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-position: </p>
        <ul>
          <li><label>Left <input type='text' name="backgroundPositionLeft"></label></li>
          <li><label>Top <input type='text' name="backgroundPositionTop"></label></li>
        </ul>
      </div>

      <div class='back_flex'>
        <p>background-size: </p>
        <ul>
          <li><label><input type='text' name="backgroundSize"></label></li>
          <li><label><input type='radio' name="backgroundSize" value='cover'>cover</label></li>
          <li><label><input type='radio' name="backgroundSize" value='repeat'>repeat</label></li>
          <li><label><input type='radio' name="backgroundSize" value='no-repeat'>no-repeat</label></li>
        </ul>
      </div>

    </div>

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

  </div>
</div>
<script>
(function() {
  const container = document.getElementById('back');
  const inputList = [].slice.call(document.querySelectorAll('input'));
  const index = inputList.reduce(function(res, item) {
      if (item.name in res) {
          if (res[item.name] instanceof Array)
              res[item.name].push(item);
          else
              (res[item.name] = [res[item.name]]).push(item);
      } else
          res[item.name] = item;

      return res;
  }, {});


  inputList.forEach(function(node) {
      const IS_RADIO = node.type === 'radio';

      node.addEventListener(IS_RADIO ? 'change' : 'input', function() {
          let value;
          if (this.name.indexOf('backgroundPosition') === 0) {
              return container.style.backgroundPosition =
                  index.backgroundPositionLeft.value +
                  index.backgroundPositionTop.value;
          } else if (this.name === 'backgroundSize') {
              value = index[this.name].filter(function(node) {
                  return node.type === 'text';
              }).shift().getAttribute('value');
              if (!value || value.trim().length) {
                  value = index[this.name].filter(function(node) {
                      return node.type !== 'text' && node.checked;
                  });
                  if (!value.length)
                      return;

                  value = value.shift().getAttribute('value');
              };
          } else if (this.name === 'backgroundImage')
              value = 'url(' + this.value + ')';
          else
              value = this.value;

          container.style[this.name] = value;
      });
  });
})()
</script>