Responsive Web Banner with Background Image and Text - html

Question

I'm trying to make a responsive banner. I have a background image that resizes as you adjust your screen and a transparent div element which contains text.
Issue 1
The problem is that my transparent div element is not resizing properly
I tried to adjust my transparent div element to the top and bottom of the image by using height:100%, but that didn't work it left a gap on top. (Picture below shows what I'm talking about)
Issue 2
Also, text inside my transparent div element should be adjusted center-left side. I got the text to move to the left side but it's not centered in the transparent div element.
.banner {
background: url(https://i.imgur.com/abF4sj3.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: 50% 50%;
width: 100%;
height: 423px;
display: inline-block;
position: relative;
margin-top: 0px;
}
.caption {
position: absolute;
top: 13%;
left: 0%;
text-align: left;
color: white;
font-weight: bold;
height: 100%;
width: 150px;
}
.transbox {
padding: 50%;
max-width: 100%;
border-radius: 6px;
width: 100%;
height: 100%;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
.transbox span {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
}
.trans-text-top {
margin-left: -55px;
margin-top: 26px;
font-size: 200%;
}
.trans-text-bottom {
margin-left: -55px;
margin-top: -20px;
font-size: 220%;
}
.linebreak {
padding-bottom: 30px;
}
upper-linebreak {}
#media screen and (max-width: 700px) {
.transbox {
display: none;
}
}
<div class="banner">
<div class="caption">
<div class="transbox">
<span class="trans-text-top">Tree</span>
<div class="linebreak"></div>
<span class="trans-text-bottom">Pathway</span>
</div>
</div>
</div>

Answer 1

Different approach
HTML structure
<div class="banner">
<img src="">
<div class="caption">
<h1>...</h1>
<h2>...</h2>
</div>
</div>
CSS
.banner {
position: relative;
...
}
.caption {
position: absolute;
top: 0;
...
}
Handle font-size in .caption with vw.
Example
.banner {
position: relative;
}
.banner img {
/* Make image responsive */
display: block;
width: 100%;
max-height: auto:
}
.banner>.caption {
position: absolute;
top: 0;
width: 25%;
height: 100%;
background: white;
opacity: 0.6;
}
.banner>.caption>h1,
.banner>.caption>h2 {
text-align: center;
}
.banner>.caption>h1 {
font-size: 5vw
}
.banner>.caption>h2 {
font-size: 4vw;
}
<div class="banner">
<img src="https://i.imgur.com/abF4sj3.jpg" alt="">
<div class="caption">
<h1>Tree</h1>
<h2>Path</h2>
</div>
</div>
Hint
The advantage of this approach is that you don't have to deal with the background-image stuff.

Answer 2

I placed an exact height on your .transbox class since it was defined in the parent container.
.transbox {
padding:50%;
max-width: 100%;
border-radius: 6px;
width:100%;
height:423px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
I set margins left and right to auto. This centers your text. Hope it helps.
.trans-text-top{
margin-left:auto;
margin-right:auto;
margin-top:26px;
font-size: 200%;
}
.trans-text-bottom{
margin-left:auto;
margin-right:auto;
margin-top:-20px;
font-size: 220%;
}

Answer 3

Try this.Hope this will work for you.
HTML Code
<div class="banner">
<div class="captionTransbox">
<h1 id="captionTop">Tree</h1>
<h2 id="captionBottom">Pathway</h2>
</div>
</div>
CSS Code
.banner {
background: url(https://i.imgur.com/abF4sj3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 423px;
position:relative;
}
.captionTransbox{
height: 423px;
width: 300px;
background-color: #ffffff;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
#captionTop {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
padding: 50% 20% 0% 5%;
}
#captionBottom {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
color: #000000;
padding: 0% 20% 20% 5%;
}
#media screen and (max-width: 700px) {
.captionTransbox {
display: none;
}
}