Как сделать фоновое изображение и наложение текста отзывчивым с помощью начальной загрузки

Question

После долгих усилий мне удалось получить текст и форму для наложения фонового изображения в нужную позицию. Тем не менее, сейчас я стараюсь сделать дизайн максимально отзывчивым, я бью кирпичную стену.

Смотри, мне нужно, чтобы текст отображался внизу фонового изображения (собственная высота 510 пикселей). Тем не менее, единственным способом, которым мне удалось этого добиться, является жесткое кодирование высоты 510px в CSS, что делает любой отзывчивый дизайн бесполезным.

Код ниже, есть предложения?

Файл CSS

    #cloud {
    background-image: url("../images/cloud.svg");
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 1149px;
    max-height: 510px;

    height: 510px;  /* img is responsive if I remove this line, but the breaks the design */

    /* align text and form at the bottom of the image */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}

HTML

    <div class="container-fluid">
    <div class="row justify-content-md-center">
        <div class="col-md-12 pb-5" id="cloud">
            <h1>Subscribe to our newsletter</h1>
            <p>Sign up and we will send insipration directly to your inbox</p>
            <form>
                <input type="email" value="Your Email Address">
                <input type="submit" value="Submit">
            </form>
        </div>
    </div>
</div>