Bootstrap Text over Image отзыв

Question

У меня есть эта разметка. Я с ума сошел, я действительно не знаю, как это сделать. Я пытался с оберткой и наложением, но не работает. Он должен быть отзывчивым, изображение и текст тоже. Любая помощь пожалуйста. Благодаря!

Вот моя разметка и CSS:

<div class="franja_blanca "> 
<div class="container"> 
<div class="wrapper"> 
<div class="header-img"> 
<img class="img-responsive" src="../header/818.png" alt=""> 
</div> 
<div class="overlay"> 
<div class="texto_naturopatia"> 
Here is my text 1</div> 
</div> 
</div> 
</div> 
</div> 

.header-img{ 
    text-align:center; 
    background-color:#fff; 
    display:inline-block; 
} 

.header-img img { 
display:inline-block; 
} 



.wrapper { 
    display: inline-block; 
    position: relative; 
} 


.wrapper .overlay { 
    color: #333333; 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
} 

.wrapper .overlay { 
    color: #333333; 
} 




.franja_blanca { 
    text-align:center; 
    height: 100px; 
    background-color:#fff; 
} 

Answer 1

Эй я сделал некоторые кодирования для вас,
надеется, что это помогает!
Вот демо ссылка: https://jsfiddle.net/j5rc1eyL/2/

<div class="position"> 
<div class="greybg"> 
    <p> HERE IS TEXT 2 HERE IS TEXT 2</p> 
</div> 
<div class="imagebox"> 
    <p>IMAGE 
    <br> 
    <br> 
    <br> 
    HERE IS TEXT 1 HERE IS TEXT 1 
    </p> 

</div> 
</div> 

.imagebox{ 
    max-width:300px; 
    margin:auto; 
    padding: 5px; 
    background-color:#0F1955; 
    text-align:center; 
    color:white; 
    font-size:14px; 
    box-shadow: 2px 2px 5px black; 
} 

.greybg { 
    background-color: #575756; 
    color: #FFF; 
    padding: 50px 0px 5px; 
    text-align: center; 
    margin-bottom: -155px; 
} 

.position { 
    margin-top:70px 
}