добавить свойство background-size: cover в скрипт смены фонов

Question

На странице есть кнопка, по нажатию которой меняется фон:

<script>
  var colorArray = ["url(source/1.jpg)", "url(source/2.jpg) no-repeat center fixed"];
  var i = 0;

  function changeColor() {
    document.body.style.background = colorArray[i];
    i++;
    if (i > colorArray.length - 1) {
      i = 0;
    }
  }
</script>
<input type="button" value="нажми меня нежно" onclick="javascript:changeColor();" />

И у меня 2 вида фонов - те, которые мостятся, если к ним не прописаны свойства, и те, которые подгоняются под экран

вопрос: как добавить к элементам массива свойство background-size: cover;, где уже есть no-repeat center fixed? мне нужны оба в одном действии

это нужно, чтобы при масштабировании фон не изменял размер

Answer 1

Свойство background позволяет задать background-size, а его значение нужно записывать через слеш /:

<script>
var colorArray = ["url(source/1.jpg)", "url(source/2.jpg) no-repeat center/cover fixed"];
var i = 0;
var n = colorArray.length;

function changeColor()
{
    document.body.style.background = colorArray[i++ % n];
}
</script>
<input type="button" value="нажми меня жёстко" onclick="changeColor()"/>

БЛОГ НА HUSL

добавить свойство background-size: cover в скрипт смены фонов

Ответы (1 шт):