Сделать отзывчивый текст размещения в jumbotron Bootstrap

Question

У меня есть страница с заголовком jumbotron.страница - http://www.mzungu.co.il/article.php?id=10

Размер jumbotron 40vmax:

.jumbotron {
    background-image:url('images/<?php echo $article_cover ?>');
    background:repeat:no-repeat;
    background-size: 100%;
    height: 35vmax;
    background-position:center center;
    color:#fff;
    text-shadow:2px 2px 4px black;
}

код, который я пробовал до сих пор:

.jumbotron h1,
.jumbotron .h1 {
    position:relative; top 30vmax;
}

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

Кроме того, я хотел создать фон только для текстовой части, как в this pic

Answer 1

это может вам помочь.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image

и для фона текста вы можете сделать это следующим образом.

.h1 {
    margin: 0 auto;
    width: 100px;

    h1 {
        padding: 6px;
        display: block;
        border-radius: 30px;
        background: rgba(192,192,192,.7);
        box-sizing: border-box;
        font-size: 22px;
        line-height: 1.8;
        text-align: center;
        text-decoration: none;
        color: #fff;
        transition: all 1s ease-out;
        position: relative;
    }
}