0

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

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

Reporter
  • 3,897
  • 5
  • 33
  • 47
Johnny McClorey
  • 5
  • 2
  • `cover` should work. What is your code when you tried adding `cover` to background? – Jaye Renzo Montejo Feb 20 '20 at 09:44
  • A question: Have you already achived the target picture with pure html and css? If so, you could use javascript to make the additional changes. – Reporter Feb 20 '20 at 09:45
  • @reporter as far as I know this cant be done using html/css, I need to change the background for one section while hovering over a different section. – Johnny McClorey Feb 20 '20 at 09:47
  • @jaye 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 cover center"; – Johnny McClorey Feb 20 '20 at 09:48
  • @JohnnyMcClorey: The final look must be possible with html and css, because Javascript just change the node values n browsers dom tree. – Reporter Feb 20 '20 at 09:51
  • @reporter do you have any suggestions as of how? Are you suggesting I add background-size: cover to the css? Because I have already tried this – Johnny McClorey Feb 20 '20 at 09:59
  • You cannot add a size for background images. May be you should provide a minimal runnable example for a better help. – Reporter Feb 20 '20 at 10:01

1 Answers1

0

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";
Jaye Renzo Montejo
  • 1,812
  • 2
  • 12
  • 25