<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #eaee44, #33d0ff);
background-color: #666666;
opacity: 0.6;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
}
.box {
position: relative;
min-height: 50vh;
background: url("/uploads/media/default/0001/01/b5edc1bad4dc8c20291c8394527cb2c5b43ee13c.jpeg") no-repeat center top;
display: flex;
background-size: cover;
}
.box p {
margin: auto;
font-size: 30px;
z-index: 1;
position: relative;
}
</style>
</head>
<body>
<div class="box">
<p>This is a some text.</p>