How do I add a banner under image that scales? html/css

In my website, I want the banner to scale to the bottom of the image at full size, but as I change the size of the window the banner changes positions. How would I get this to attach to the bottom of the image?


  <div class="hero-image">
    <div class="container">
      <h1><span> Meeshka's Freedom Art </br> Summer Program </span></h1>


.hero-image {
  display: fixed;
  overflow: hidden;
  background: url( no-repeat center;
  background-size: cover;
  height: 60em;
  width: 100%;
.container {
  position: relative;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  color: white;
  background-color: rgba(119, 61, 189, 0.5);
  height: 8em;
  text-align: center;
  padding: 3%;
.container h1 {
  font-family: "roboto";
  font-size: 4vw;
  letter-spacing: 0.05em;