Javascript style.background не позволяет мне регулировать размер изображения - PullRequest
0 голосов
/ 20 февраля 2020

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

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

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

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

1 Ответ

0 голосов
/ 20 февраля 2020

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

document.getElementById('scrolling-background-section').style.background = "url('media.cntraveler.com/photos/5698051378d099fc122487e3/master/…) no-repeat center / cover"; 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...