Superponer texto en bootstrap3

[jc1992]

Buenas noches ! Tengo un problema y creo que es de uq eno se como funciona bootstrap ese vamos , quiero que la imagen ocupe toda la altura del div disponible.

El problema está en que quiero que la altura se adapte al contenido ya que el texto se ponde donde tiene que estar pero el background sigue rojo , ese es el problema :(

Un overflow hidden no soluciona los problemas o almenos no lo detecta ben.

Si me dejáis un enlace o hay alguna forma de hacerlo en bootstrap3 lo de sobreponer texto en una imagen me lo podeis decir y lo cambio sin ningún problema.

Código HTML:

<div class="col-xs-6 col-md-3 nopadding margen" style="background-color:red;border:0;">
                <div class="col-xs-12 col-md-12 nomargen nopadding">
                                 <div class="ratio imagen">
                                    </div>
                                <div class=" col-xs-12 nopadding transparente texto">
                                        <div class="col-xs-12 nopadding">
                                            Conferencia
                                        </div>
                                        <div class="col-xs-12 nopadding">
                                            Equipo
                                        </div>
                                    </div>
                                    
                </div>
                
            </div>
 

Código CSS:

.texto{
z-index:9;bottom:32px;
}
 

Código CSS:

.imagen{
position:relative;z-index:1;background-image:url('http://www.solobodas.net/img/anuncios/779/unnamed%20%2811%29.jpg')
}
 

Código CSS:

.ratio{
    position:relative;
    width: 100%;
    padding-bottom: 70% ; /* % of width, defines aspect ratio*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;  
}