Question

When I load my web page, I want my background image to exactly match my window size. I have the following code. It is giving me an error: $("body") is null. The page loads and the background has an image, however, the background is not the correct size.

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

What is the correct way to resize my background image in this javascript?

Answer 1

Wrap the code to resize in $(function() { }). This will ensure the DOM is ready to be modified before your code executes.

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

You should just be able to use CSS…

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

Assuming your body element is defined to fill the viewport.