How to make a responsive div in css - html

Question

So I have this small webpage I am trying to build. Everything looks good til I try to scale-in and out the browser windows to check it's responsiveness.
It looks good with 320x568 as below.
But when it scaled in (reduce the browser window, it shows like this, which I don't want that black box (`.transbox) to go down beyond the photo.)
I am using bootstrap framework and I DON'T NEED TO USE css media queries to make it responsive.
How can I do it with css instead?
This is my current html and css
.masthead {
height: 20vh;
min-height: 370px;
background-image: url("http://lorempixel.com/1920/1080");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
div.transbox {
margin: 30px;
background-color: rgba(0, 0, 0, 0.6);
min-height: 300px;
}
div.transbox p {
font-weight: bold;
color: white;
}
.transbox h1 {
color: white;
}
<header className="masthead">
<div className="container">
<div className="row align-items-center">
<div className="col-12 text-center">
<div class="transbox">
<h1 className="font-weight-light">
All your Escort needs within a single place!
</h1>
<p className="lead">
Find the best set of escort services in Sri Lanka
</p>
</div>
</div>
</div>
</div>
</header>
Can someone please help me? Is there a bootstrap class or pure css way to do this?

Answer 1

Here is the working example:
body {
margin: 0;
padding: 0;
}
.masthead {
width: 100%;
height: 100%;
min-height: 100vh;
background-image: url("http://lorempixel.com/1920/1080");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
div.transbox {
margin: 30px;
background-color: rgba(0, 0, 0, 0.6);
min-height: 300px;
}
div.transbox p {
font-weight: bold;
color: white;
}
.transbox h1 {
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header class="masthead">
<div class="container">
<div class="row align-items-center">
<div class="col-12 text-center">
<div class="transbox">
<h1 class="font-weight-light">
All your Escort needs within a single place!
</h1>
<p class="lead">
Find the best set of escort services in Sri Lanka
</p>
</div>
</div>
</div>
</div>
</header>

Answer 2

.masthead {
height: 20vh;
min-height: 400px;
background-image: url("http://lorempixel.com/1920/1080");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
div.transbox {
margin: 30px;
background-color: rgba(0, 0, 0, 0.6);
min-height: 300px;
}
div.transbox p {
font-weight: bold;
color: white;
}
.transbox h1 {
color: white;
}
<header className="masthead">
<div className="container">
<div className="row align-items-center">
<div className="col-12 text-center">
<div class="transbox">
<h1 className="font-weight-light">
All your Escort needs within a single place!
</h1>
<p className="lead">
Find the best set of escort services in Sri Lanka
</p>
</div>
</div>
</div>
</div>
</header>
Your content is more as compare to width of background image. So, just increase the height of your background image or just reduce the font-size via media query.