Check out the layout of my webpage here: https://i.sstatic.net/Ap4nx.jpg
The background image I used is this one: https://i.sstatic.net/dIhLt.png
I am trying to achieve a black transparent overlay on the image, similar to this: https://i.sstatic.net/FMdiB.png
Take a look at my html and CSS code below:
<!DOCTYPE html>
<html>
<head>
<title>Background Image</title>
<meta charset="utf-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
body{
margin-top: 53px;
}
.jumbotron {
background-image: url("background1.jpg");
text-align: center;
height:522px;
background-size: cover;
}
/* Add your CSS styling for the black transparent overlay here */
</style>
<body>
<section id="page-top">
<div class="jumbotron">
<p data-aos="zoom-out" data-aos-delay="500" style="font: 120px Verdana,sans-serif; margin-top: 35px; color: black; animation-duration: 2s; animation-iteration-count:infinite; animation-delay: 1s;" class="lead pulse mb-5 green pb-5 aos-init aos-animate">Matt Williams</p>
<p data-aos="zoom-out" data-aos-delay="500" style="font: 20px Georgia,serif;font-style:italic; line-height: 1.6; color:white;animation-duration:2s;animation-iteration-count:infinite; animation-delay:1s;" class="lead pulse mb-5 lightGreen pb-5 aos-init aos-animate d-none d-lg-block">Lorem Ipsum.<br>Lorem Ipsum.</p>
</div>
</section>
</body>
</html>