html - CSS + HTML : Image relative with text over it

Question

几天以来，我一直在努力完成这项工作。我有一个带有 text 图像的设计，我终于可以在图像上设置文本，但我想给图像一个 top position 但是底部空间太大，我不知道如何修复!

这就是我所拥有的:我知道我必须修复文本上的一些填充内容。

这是我的标记，顺便说一句，我正在使用 bootstrap。

<div class="row-color clearfix">
<div class="container">
<div class="col-lg-12 no-padding wrapper">
<img class="img-responsive" src="http://s12.postimg.org/mu9u7nzvx/header_ml_02.png" alt="">
<div id="bg-text">
<div class="text-overimg">Child Education Planner</div>
</div>
</div>
<div class="texto_cursos">Face courses, distance and on-line</div>
</div>
</div>



.row-color {
    background: #575756 none repeat scroll 0 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.5em;
    position: relative;
    z-index: 9;
    padding-bottom: 20px;
}

.no-padding {
    padding:0px;
}

.wrapper {
  padding-left: 10px;
  padding-right: 10px;
  text-align:center;
  position:relative;
}

.wrapper .img-responsive {
    display:inline;
}

.wrapper #bg-text {
    color: white;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

.text-overimg{
    position:relative;
    font-size:3.1em;
    color:#FFF;
    font-weight:500;
    text-shadow: 0.08em 0.08em 0.05em #333;
    padding-top: 20%;
}

.texto_cursos{
    padding-bottom: 10px;
    font-size:2.5em;
    color:#FFF;
    font-weight:400;
    text-align:center;
}

我想要这个，我不得不说我想让它响应大多数设备，这是我使用的东西之一 bootstrap。

这才是我真正想要拥有却不知道如何去做的。特别是图像后面的白色背景，最后一个文本和图像之间没有太多空间。

再次感谢!

Answer 1

** 更新我不小心说了，如果你想把图像向上移动一点。我的意思是向下**

如果你想将图像向下移动一点，你可以添加一个 margin-top 到它:

.wrapper .img-responsive {
    display:inline;
    margin-top:50px;
}

请参阅JSFiddle here