Full screen splash screen

custom.js

(function($) {

	$('#toggle').click(function() {
		$(this).toggleClass('active');
		$('#overlay').toggleClass('open');
	});
 	

	//Jumbotron scroll button click (there is also hide function bellow to hide it after scroll)
 	var height_jumbotron_scroll = $(window).height()/2+100;

	$('a.see-more-button').click(function( event ) {
		event.preventDefault();
		 $('html, body').animate({scrollTop: height_jumbotron_scroll}, 800);
	});

})(jQuery);

(function($) {

	$(document).ready(function(){
	resizeDiv();
	});

	window.onresize = function(event) {
	resizeDiv();
	}

	function resizeDiv() {
	vph = $(window).height() +1; //+1 just in case
	$('.homepage-jumbotron').css({'min-height': vph + 'px'});
	}

})(jQuery);

index.php

<?php if (has_post_thumbnail( $post->ID ) ): ?>
		<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
		<div class="homepage-jumbotron" style="background-image: url('<?php echo $image[0]; ?>')">
			<div class="jumbotron-content-wrapper">
				<h1>QR & barcode revolution</h1>
				<p class="big hidden-xs hidden-sm">We revolutionized the tech world by building small and simple<br/>communities around QR and barcodes.</p>
				<a class="see-more-button" href=""><img src="<?php echo get_template_directory_uri() . '/assets/img/scroll-down.svg'; ?>" alt=""></a>
			</div>
		</div>
<?php endif; ?>

style.css

// Jumbotron

html, body, .homepage-jumbotron, .jumbotron-content-wrapper {
width:100%; 
height:100%;
}

.homepage-jumbotron {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: table;
  width: 100%;
}

.jumbotron-content-wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: white;
  padding: 0 15px;
}