Overlay behind text on slider

I am trying to address some legibility issues with the text on the slider.

Before I get into specifics, I should point out that I have vertically aligned ‘.builder-banner-content:after’ and ‘.builder-banner-inner-content’ to the bottom so the text will appear at the bottom of each slider.

The most natural way to improve legibility of the text on the slider would be to darken the slides, as allowed for in the banner template. Unfortunately, my coworkers and I do not like the way the overlay dims the images entirely. So, I’m trying to resize the overlay with a height relative to the height of the text content.

Here is the code I presently have altered to reposition the overlay:
‘.builder-banner-overlay, .builder-section-overlay {
position: absolute;
bottom: 10px;
left: 0;
width: 100%;
height: 15px;
background-color: rgba(0, 0, 0, .5); }’

A fixed height, as listed above, doesn’t work for all of the slides, though, because the content length varies. As the screen resolution shrinks, the height of the text extends upward from the bottom, leaving the overlay at the bottom of the image. I would like the overlay to appear full-width behind the slider text, regardless of how far it extends upward as the screen resolution is adjusted.

Can anyone advise me on how to accomplish this?

Thanks!