JSFiddle - React, Tailwind, and code Playground

HTML

<div id="cards">

<div class="card-wrapper"><div class="card">
Text
</div></div>

<div class="card-wrapper"><div class="card">
Text
</div></div>

</div>

CSS

body{
  width: 100%;
	height: 100%;
  margin: 0;
  position: absolute;
}
#cards{
	width: 100%;
	height: 100%;
  overflow-y: auto;
}
.card-wrapper{
	width: 100%;
	height: 100%;
	background: url(https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?auto=compress&cs=tinysrgb&h=350);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}
.card{
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.875);
	font-family: "Helvetica Neue", Helvetica, Arial;
	font-size: 14px;
	text-align: left;
	color: #FFFFFF;
}