body {
font-family: Arial;
font-size: 15px;
}
.container {
position: relative;
max-width: 1800px;
height: auto;
margin: 0 auto;
text-align: center;
width: 90%;
}
.container img {
vertical-align: center;
}
.container .content {
position: absolute;
background: rgb(2, 2, 2);
background: rgb(5, 5, 5, 0.5);
color: rgb(255, 230, 0);
width: 100%;
padding: 5px;
text-align: center;
bottom: 0;
overflow: hidden;
}<div class="container">
<img src="https://sample-image.com" alt="Sample Image" style="width:90%;">
<div class="content">
<h2>The Dragon</h2>
<p>“Forget about winning and losing; forget about pride and pain. Let your opponent graze your skin and you smash into his flesh; let him smash into your flesh and you fracture his bones; let him fracture your bones and you take his life! Do not be concerned
with escaping safely- lay your life before him!!”.</p>
</div>
</div>