Javascript style.background не позволяет мне регулировать размер изображения

Question

Я хочу, чтобы фоновое изображение красной секции изменилось, когда пользователь наводит курсор на синюю секцию.

У меня это работает нормально со следующим кодом

<script>
    document.getElementById('scrolling-background-column-left').onmouseover = function()        
     {        
      document.getElementById('scrolling-background-section').style.background = "url('https://media.cntraveler.com/photos/5698051378d099fc122487e3/master/w_820,c_limit/Sunset-Beach-Oahu-cr-getty.jpg') no-repeat center";
     };

     document.getElementById('scrolling-background-column-left').onmouseout = function()        
     {        
      document.getElementById('scrolling-background-section').style.background = "";
     };
</script>

Однако - это результат, когда я наведу курсор мыши на синюю секцию. Есть ли способ сделать так, чтобы изображение охватывало весь раздел / всю ширину страницы? Я попытался добавить cover к коду, но это, похоже, не работает, если я пытаюсь изменить размер изображения с помощью кода, это ломает все.

Answer 1

cover должно работать в вашем случае. Когда вы используете сокращенное свойство background, вам нужно иметь /, разделяющее значения позиции и размера:

document.getElementById('scrolling-background-section').style.background = "url('media.cntraveler.com/photos/5698051378d099fc122487e3/master/…) no-repeat center / cover";