Home Element Slider Smartslider 3

Hi - I've tried following similar threads and have had some success. The obvious issue is getting the background overlay to match the depth of the slide on any given screen size. Although this maybe a difficult fix as the depth of hero is depth of the hero background is decided by the % amount of padding. Creating custom darker slides might be the answer or just better slider height consistency.

Thanks!

Markup I'm using is as follows:

and CSS..

/* HomePage Slider v1 */
.slider-hero {
position: relative;
}
.background-slider {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}