[Tutorial] How to make hero section always fill browser window

Community resources Webflow Tips
20

There seems to be an issue somewhere I dont know, but need your help.

I have integrated thesergie option 1 and this: [Code Tutorial] Full window site - #6 by bartekkustra - Webflow Tips - Forum | Webflow, I inserted an image with a width of 100% into the container. my observations.

  1. The image is not responsive with the container size when the browser window is resized.
  2. The 100% height of the container does not put into consideration the containing image so the image creates an annoying gap when looking at the different devices sizes.

Same issue too with this script here:

$(document).ready(function() {
    vph = $(window).height();
    $('.full-page').css('height',vph);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').css('height',vph);
});

How can I ensure the image within the container div. “full-page” is responsive or fills the container in all media queries. Kindly resize the browser window and you will see the gap below the container. The image suppose to fill that height.

url: https://webflow.com/design/verticalmenu-sub?preview=1d6fc3749214ed69ab6a5f2c665db1a4

http://verticalmenu-sub.webflow.com