Fullscreen header banner section

Now that day we have seen many great websites or themes have with a full-screen banner section. when scroll down then you would see the rest of the content. if we resize the window or check it the site or theme in deferent screen size or mobile, this banner section will desplay as full screen. When scroll site then desplay rest of content. This is great componet for website, here we will see how to do this.

CSS based Fullscreen header banner section

We can make full screen header banner section without use of jQuery, we will use the Viewport units, It's the unit size representing 1% of the viewport size, With this method we are avoiding the javascript dependency, below have Demo and Try Your self link

The HTML Markup

First we creating html structure for Full Screen header banner section. the html structure is as follows:

<div id="bannersection">
	<div class="bannercontent">
		<h1>You can create full screen banner sections without use of javascript.</h1>
		<p>its great, Resize your browser and see how they adapt.</p>
	</div>
</div>
<div class="restofcontent">
	<h2>Css based Fullscreen banner section</h2>
</div>

The CSS

Now we make css for full screen banner section, In this method we can simply apply the height value for our banner section as 100vh. it will be 100% of the viewport height and width will be set as 100% so this will make banner secton full screen, and this will allow to re-size the window as full screen banner section, please check it the below code for css

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	body {
		font-size: 16px;
		font-family: Helvetica, Arial, "sans-serif"
	}
	h1 {
		text-align: center;
		padding: 30px 0;
		font-size: 40px;
		font-weight: normal;
	}
	h2 {
		text-align: center;
		padding: 50px 0;
		font-size: 24px;
		font-weight: normal;
	}
	#bannersection {
		position: relative;
		display: table;
		width: 100%;
		background: rgba(99,214,250,1);
		/* ms ( IE 10.0+ ) */
		background: -ms-radial-gradient(ellipse closest-side at 50% 50%, rgba(99,214,250,1) 0.14%, rgba(56,184,224,1) 99.61% );
		/* WebKit (Chrome 10.0+, safari 5.1+ )*/
		background: -webkit-radial-gradient(ellipse closest-side at 50% 50%, rgba(99,214,250,1) 0.14%, rgba(56,184,224,1) 99.61% );
		/* Moz ( Moz 3.6+ )*/
		background: -moz-radial-gradient(ellipse closest-side at 50% 50%, rgba(99,214,250,1) 0.14%, rgba(56,184,224,1) 99.61% );
		/* Opera ( opera 11.6+ )*/
		background: -o-radial-gradient(ellipse closest-side at 50% 50%, rgba(99,214,250,1) 0.14%, rgba(56,184,224,1) 99.61% );
		/* W3C Markup */
		background: radial-gradient(ellipse closest-side at 50% 50%, rgba(99,214,250,1) 0.14%, rgba(56,184,224,1) 99.61% );
		height: 100vh;
	}
	.bannercontent {
		display: table-cell;
		vertical-align: middle;
		color: #FFF;
		text-align: center;
		font-size: 18px;
		font-weight: normal;
		padding: 0 3%;
	}
</style>

Lastly, this will supported on all modern browsers and partially supported on IE9 and above.

Demo Try Your Self Download