<header>
	<div>
		<h1>hoge</h1>
		<h2>hugahuga</h2>
	</div>
</header>

<section>
	<div class="container">
		<h3>foo bar</h3>
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores harum veritatis nemo magni odio reprehenderit atque, esse animi porro suscipit vero nobis modi quis. Exercitationem quasi beatae, assumenda officia illum sunt. Cum voluptas maiores vitae eius hic inventore deleniti placeat perferendis quam ut nostrum maxime optio voluptatibus ab laboriosam, quia consectetur atque minus?
		</p>
		<p>
			Adipisci amet aut sint voluptates delectus aperiam? Veniam ab illum enim in libero nihil culpa explicabo perspiciatis veritatis non repellendus architecto excepturi nostrum porro voluptatem aperiam animi asperiores, a voluptatibus temporibus minima voluptas ipsa! Recusandae nostrum, aut, voluptates est error iusto, eaque excepturi soluta quas maiores amet.

		</p>
	</div>
</section>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	width: 100%;
	height: 100%;
	/* Existing styles here */
	overflow: hidden;
}
body {
	width: 100%;
	height: 100%;
	font-size: 18px;
	color: #212121;
	/* Existing styles here */
	perspective: 4px; /* The depth */
	overflow-x: hidden;
	overflow-y: scroll;
}
header {
	width: 100%;
	min-height: 100vh;
	position: relative;
	/* Existing styles here */
	transform-style: preserve-3d;
}
header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	background: url("https://source.unsplash.com/1600x900/?nature,water");
	background-size: cover;
	z-index: 0;
	/* Existing styles here */
	transform: translateZ(-4px) scale(2);
}
header div {
	position: absolute;
	z-index: 1;
	top: 50%;
	padding: 0 30px;
	/* Existing styles here */
	transform: translateZ(-2px) scale(1.5);
}
header h1 {
	font-size: 4.5rem;
	color: #009688;
}
header h2 {
	font-size: 2.2rem;
}
section {
	width: 100%;
	background: white;
	/* Existing styles here */
	position: relative;
	z-index: 2;
}
.container {
	margin: auto;
	max-width: 1000px;
	padding: 80px 40px;
}

.container p {
	padding-top: 30px;
	line-height: 1.8;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.