Put a div with background over IMG - html

Question

what i'm trying to make it look like
I'm trying to put a div with a background over an img, I've looked over a lot of resources and when I make a background color the background color covers the whole image.
<div class="containerBox">
<div class="text-box">
<h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tea</h4>
</div>
<img class="img-responsive" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg">
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
text-align: center;
width: 100%;
}
.text-box:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
h4 {
display: inline-block;
font-size: 20px; /*or whatever you want*/
}
img {
display: block;
}

Answer 1

There are a lot of ways to do that. Depends on what you specifically need.
If you can let go img tag and use background image (which is in general considered better), i recommend on using the following code snippet. (This may have extra lines of code but it solves the purpose, please delete these extra lines.)
<div class="containerBox">
<div class="text-box">
<h4> Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Oragnic Tea</h4>
</div>
</div>
<style>
.text-box {
display: grid;
/* Or Flex */
place-items: center;
/* Or For Flex use align-items and justify-content */
position: absolute;
height: 100%;
width: 100%;
text-align: center;
}
.text-box::before {
content: '';
background: url('https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg') no-repeat center center/cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 1;
/* Opacity: as you like */
}
h4 {
display: grid;
place-items: center;
height: 20%;
width: 1000px;
color: white;
background-color: rgba(0, 0, 0, 0.541);
/* Or whatever you want */
}
</style>
If you want img tag:
.containerBox {
position: relative;
display: inline-block;
}
.text-box {
position: absolute;
height: 100%;
width: 100%;
text-align: center;
z-index: 1;
}
h4 {
display: grid;
place-items: center;
height: 30%;
width: 80%;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.555);
/*or whatever you want*/
}
img {
display: block;
}
If by background color you meant background color of text-box, then you need to reduce its heigth and width else use ::before pseudo selector and set its height and width.