Css + html: Image relative with text over it - html

Question

Since a few days I am trying to make this work. I have a design with an image with a text over it, I just finally could set the text over the image, but I want to give a top position to the image but too much space at the bottom and I don't know how to fix it!
This is what I have: I know I have to fix some padding things on the texts.
and this is my markup, by the way I am using 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;
}
I would like to have this, I have to say that I want to make it responsive for most of the devices, this is one of the things I use bootstrap.
This is what I really want to have but don't know how to do it. Specially the white background behind the image without too much space between the last text and the image.
Thanks again!

Answer 1

** UPDATE I Accidently said if you want to move the image up a little. I meant down**
If you want to move the image down a little you can add a margin-top to it:
.wrapper .img-responsive {
display:inline;
margin-top:50px;
}
Please see JSFiddle here

Answer 2

try something like that:
.imagebox-container {
width: 100%;
padding-top: 30px;
background: linear-gradient(0, gray 50%, transparent 50%);
}
.imagebox img {
max-width: 100%;
display: block;
}
.imagebox-caption {
width: 100%;
text-align: center;
padding: 5px;
line-height: 1;
}
.imagebox {
position: relative;
width: 400px;
margin: 0 auto;
}
.imagebox-caption-overlay {
position: absolute;
bottom: 10px;
transition: 500ms all linear;
width: 100%;
text-align: center;
background: transparent;
color: white;
}
.imagebox:hover .imagebox-caption-overlay {
background: white;
color: black;
}
<div class="imagebox-container">
<div class="imagebox">
<img src="https://www.drupal.org/files/issues/header_1.png" />
<div class="imagebox-caption-overlay">ANOTHER BLA BLA BLA</div>
</div>
<div class="imagebox-caption">
bla bla bla
</div>
</div>

Answer 3

may be you need this. please see .
.imagebox-container {
width: 100%;
padding-top: 30px;
background: linear-gradient(0, gray 50%, transparent 50%);
}
.imagebox img {
max-width: 100%;
width: 400px;
margin: 0 auto;
display: block;
}
.imagebox-caption {
width: 100%;
text-align: center;
padding: 5px;
line-height: 1;
}
<div class="imagebox-container">
<div class="imagebox">
<img class="img-responsive" src="http://s12.postimg.org/mu9u7nzvx/header_ml_02.png" alt="">
</div>
<div class="imagebox-caption">
Face courses, distance and on-line
</div>
</div>