Bootstrap + JS plugin: how to place a caption on top of an image?

Question

JavaScript

There is an html page.
Lies here (SORRY, INITIALLY THE LINK WAS A BATTLE, now everything is OK):
https://dl.dropboxusercontent.com/u/28959587/pract... Connected
to it:
*Bootstrap (needed for adaptive layout)
getbootstrap.com
*Flowtype (js plugin, for responsive font)
simplefocus.com/flowtype
*Fit.js (js plugin, for centering elements)
soulwire.github.io/fit.js
Problem:
Fit.js plugin doesn't work (probably I connected it incorrectly) .
I want "Practicana" to be centered on the first image, both vertically and horizontally. Text only, no yellow background.
Just like in this picture:
https://dl.dropboxusercontent.com/u/28959587/shot.png
To do this, I'm trying to place a class="container" div (which is labeled Practicana) inside a class="row" div (which is filled with an image).
I am using this code:

<div id="welcomeimage" class="row" style="background:#FFCC66;">
    <img class="img-responsive" src="http://practicana.com/img/background-02.jpg">
    <div id="practicanatitle" class="container" style="text-align: center; margin: 20px auto;">
         <h6 style="line-height: 1; font-family: 'Oleo Script Swash Caps', cursive; color:white;">Practicana</h6>
    </div>
</div>

In this case, the caption is placed after the image.
I feel like an idiot - I didn't take into account something banal.
Why don't I use the background property:
It doesn't fit the image to the width of the window, but simply displays it at a scale of 1:1 in the div area.
It does not suit me.
Why not make a picture with an inscription in Photoshop:
This inscription should be easy to change, moreover, other content will subsequently be placed under the inscription (therefore, it is important for me to overlay div blocks on top of each other).
Tell me how to achieve the effect of overlaying text on an image using the Fit.js plugin?
UPD
Suggested this option:
jsbin.com/fudusimi/1
But there is one small BUT:
The image height is fixed. And I need it to be floating. When narrowing the browser window, the width of the image still fills it by 100%, and the height decreases proportionally.
Are there any other considerations?

Answer 1

Try background-size:cover; , but in general, there are a lot of options, for example jsfiddle.net/26Qtx or so

Answer 2

<div id="welcomeimage" class="row">
    <img class="img-responsive" src="http://practicana.com/img/background-02.jpg">
    <div id="my_text_id" class="container">
        Practicana
    </div>
</div>

img {
    width: 300px;
    height: 300px;
}
#welcomeimage {
    position: relative;
    width: 300px;
    height: 300px;
}
#my_text_id {
    width: 100%;
    position: absolute;
    text-align: center;
    top: 50%;    
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

Set your sizes. And write pliz styles in css file :)
jsfiddle.net/Y92bb

Answer 3

Thanks to all!
I'm still struggling with z-index and background-size...
I'm a perfectionist, so the background still doesn't work quite the way I want it to. It still does not want to fill the entire width of the window, decreasing / increasing while maintaining proportions ....