JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<div class="wraper">
    <div class="content">
        <h1>заголовок</h1>
     </div>
</div>

<!-- <div class="wraper">
    <div class="content">
        <h1>заголовок</h1>
     </div>
</div> -->





    </body>

CSS

* {
    margin:0;
    padding:0;
  }

.wraper{
	perspective: 1px;
	transform-style: preserve-3d;
	overflow-y: scroll;
	overflow-x: hidden;
}

.content{
	min-height: 100vh;
	transform-style: preserve-3d;
	width: 100%;
}

.content::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	min-height: 100%;
	background-image: url(https://picua.org/images/2018/11/17/560b24bae099abf1bacdbafb162d62b2.jpg);
	/*background-color: #f10000;*/
	background-repeat: no-repeat;
	background-size: cover;
	transform:translateZ(-1px) scale(2);
}

.content h1{
	/*margin-top: 400px;*/
	display: flex;
	align-items: flex-end;
	padding-top: 140px;
}