Как правильно заменить фоновое изображение HTML?

Question

Я пытаюсь просто заменить фон тега HTML и заполнить его.

Это мой код, который работает, чтобы заполнить экран при загрузке страницы:

html { 
    background: url(1000x800.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

У меня есть некоторый код в JQuery, который прослушивает страницы прокрутки, а затем пытается заменить изображение, которое это:

$(window).scroll(function() { 
     // when the scroll reaches the bottom 
     if($(document).scrollTop() >= new_height) { 
      new_height = $(document).scrollTop() + 10; 
      // change the background 
      $('html').css({background: "url(1000x800_2.jpg) no-repeat center center fixed"}); 
     } 

    }); // end of window scroll 

Изображение заменяется, оно центрировано и фиксировано. Однако он не заполняет экран. Он остается на 1000x800 (размер экрана - 1900x1000).

Похоже, что свойство «background-size: cover» теряется в процессе. Так что я попытался восстановить, что и я получаю яваскрипт ошибки, используя этот код:

$('html').css({background-size: "cover"}); 

Кто-нибудь знает, как сделать эту работу правильно?

Спасибо.

Answer 1

background - свойство ярлыка. Если вы не укажете все параметры, то любые не прилагаемые будут сбрасываться по умолчанию. Как только изменение фонового изображения, использовать background-image:

$('html').css({ 'background-image': 'url(1000x800_2.jpg)' });