Как перекрыть изображение, центрированное между двумя жумботронами, с помощью Bootstrap 4?

Question

Я хочу сделать что-то вроде этого

Насколько я знаю, в верхней части экрана есть один джумботрон, а в контейнере ниже первого джумботрона - другой джумботрон.Я хочу поместить изображение по центру между ними.

Пока у меня есть это в HTML:

<header class="text-center">
        <div class="jumbotron mb-0">
            <h3>Text</h3>
            <h5>Text</h5>
        </div>
        <img src="routeOfTheImage" class="rounded-circle img-fluid">        
        <div class="container">
            <div class="row mt-0">
                <div class="col-12">
                    <div class="jumbotron"></div>
                </div>
            </div>
        </div>
    </header>

И в CSS у меня есть это:

.contenedor-imagen{
    margin:0;
    padding: 0
}

.contenedor-imagen div{
    margin:0;
    padding: 0
}
header img{
    position: relative;
    bottom: 50px;
    height: 200px;
    width: 200px;
    margin: 0;
    padding: 0;
}

Это показывает с большим отступом между двумя jumbotrons и изображение не реагирует.Как я могу решить это?