Javascript, чтобы размер моего фонового изображения соответствовал размеру моего окна

Question

Когда я загружаю свою веб-страницу, я хочу, чтобы мое фоновое изображение точно соответствовало размеру моего окна.У меня есть следующий код.Это дает мне ошибку: $("body") is null.Страница загружается, и фон имеет изображение, однако фон имеет неправильный размер.

  function resizeFrame() 
  {
      alert("resizeFrame");
      var h = window.screen.height;
      var w = window.screen.width;
      $('body').css('background-size', w + 'px ' + h + 'px' );
  }  

Как правильно изменить размер моего фонового изображения в этом JavaScript?

Answer 1

Оберните код для изменения размера в $(function() { }).Это обеспечит готовность DOM к изменению до выполнения вашего кода.

$(function() {
   $(window).resize(function() {
       $('body').css('background-size', $(this).width() + 'px ' + $(this).height() + 'px');
   });
});

Вы просто сможете использовать CSS ...

body {
    background-size: 100% 100%;
}

Предполагая, что ваш элемент bodyопределяется для заполнения области просмотра.

Answer 2

вызов функции после завершения загрузки страницы.

$(document).ready({
    resizeFrame() 
});