Struggling to make module same height as Hero background image

Question

I am working on converting a static site to Joomla and am getting a bit stuck with regards to styling a module position so that it is the same height as the background image for the row.

The look I need to copy is the banner here:

I have set up 2 module positions in this row and have assigned the module with the content in it to the #banner position. However, if I try and add padding to expand the background colour the background image moves.

Basically the opaque white background needs to be the same height as the background image and must stretch to the far right of the screen as in a fluid row.

I'm coming up stuck with this one, has anyone tried doing this before?

Any suggestions would be most appreciated, as I've spent quite some time testing css but have not manage to achieve what I need.

The Joomla site is here

Thanks again guys. D

Edit: Links removed

Answer 1

The site you have linked to just does it by making the white shadow part of the image:

Edit: Link removed

If you want pure CSS, you're probably best looking at doing something like the following:

<div id="banner">
  <div id="innertext">
      HELLO WORLD
  </div>
</div>

#banner {
  width:100%;
  background:#f00;
  min-height:400px;
  position:relative;
}

#innertext {
  background:rgba(50,50,50,0.5);
  width:50%;
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
}

Positioning the overlay absolutely within the banner area allows you to fill the available height.

(https://jsfiddle.net/ruxjpt7s/)