Responsive Web Banner with Background Image and Text

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

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;
        }
    } 

Answer 2

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 3

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%;  
 }