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