Добавление background-X

[Dilettante_Pro]

оставить 2-3 браузера с одинаковой поддержкой, а остальные заблокировать нафиг

Ну да, и клиентам принудительно устанавливать правильный браузер...

Консоль-то что-то говорит? Ошибки? Обработчики на инпуты устанавливаются?

так это же тоже самое фактически)

Не совсем, в некоторых браузерах не работает `.

[Nexus]

так это же тоже самое фактически)

Нет, совсем не тоже самое.
https://developer.mozilla.org/ru/doc...mplate_strings

[madeas]

Ребята, подскажите, а как разбить этот бэкграунд на части, чтобы бэкграунд превратился в в бэкграунд-имадже, а другие давали свои параметры?

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.backgroundImage = 'url(' + document.querySelector("#bgImage").value + ') ';
        back.style.backgroundRepeat = document.querySelector('[name="repeat"]:checked');
        back.style.backgroundPosition = + x.value + '% ' + y.value + '%';
        back.style.backgroundSize = so.checked ? 'cover' : st.checked ? 'contain' : si.value + 'px';
      })();      
      document.querySelectorAll('input').forEach(el => el.oninput = style);

Вроде бы сделал правильно, но не работает. В чем ошибка?

[madeas]

настроил.

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.backgroundImage = 'url(' + document.querySelector("#bgImage").value + ') ';
  back.style.backgroundSize = so.checked ? 'cover' : st.checked ? 'contain' : si.value + 'px';
  back.style.backgroundRepeat = document.querySelector('[name="repeat"]:checked').parentNode.textContent;
  back.style.backgroundPosition = y.value + '%' + x.value + '%';
})();
document.querySelectorAll('input').forEach(el => el.oninput = style);