Javascript style.background not allowing me to adjust size of image

I want the background image of the red section to change when the user hovers over the blue section.

I have got this to work fine with the following code

<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>

However is the result when i hover over the blue section. Is there a way to make the image span across the entire section/whole width of the page? I have tried adding cover to the code however this doesn't seem to work, if i try changing the size of the image through the code it breaks everything.

cover should work in your case. When you use the background shorthand property, you need to have a / separating the position and size values:

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