CSS Fullscreen Header Banner Section

Edit Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fullscreen Header Banner Section</title>
<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>
</head>

<body>
<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="text-center">
  <h2>Css based Fullscreen banner section</h2>
</div>
</body>
</html>
Preview html View