How to make the hero section always fill browser window?

Issue

I was wondering how I can fill a hero image to the browser viewport. So that the height of the hero section is always the height of the viewport.

I came up with the following piece of code, but it isn't working:

function resizer() {
  var fulls = $('#hero');
  console.log(fulls);
  var win = $(window);

  resize.on(function() {
    fulls.height(win.height());
  });
};

Solution

Try to use:

$(window).resize(function() {
    $('#hero').height($(window).height());
}).resize();

Answered By - Felix