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
}