Write inside a container with an image covering the entire background - html

Question

I have this code in codepen, I have created a nested container, in one I am loading an image where it takes the full background and it's completely responsive, now what I want is to simply be able to use another container and write text in it and place it somewhere on this image. What happens is that everything I add comes under the full cover image. Now I know all about using css to create a background image but those are not really fully responsive. I want to know if there's a possibility to use the nested columns.
The code is here: http://codepen.io/spacepirate/pen/LNyxXM
<div class="row" style="padding-top:100px">
<div class="col-xs-12">
<img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive">
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>

Answer 1

You say:
write text in it and place it somewhere on this image
If you want to place it somewhere, use then position:absolute; for your text and keep your image like you have now.
Or try this:
<img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive" style="position:absolute;width:100%;">
DEMO

Answer 2

why don't you use the background-image tag?
background-image: url("https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1");

Answer 3

try this
HTML
<div class="row parent-block" style="padding-top:100px">
<div class="col-xs-12 child-image-block">
<img src="https://www.dropbox.com/s/k9ayqwlborr31kd/Earth.jpg?raw=1" class="img-responsive">
</div>
<div class="row child-content-block">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
CSS
.parent-block { position:relative;}
.child-image-block { position:absolute; left:0; right:0; top:0; bottom:0; width:100%; z-index:1;}
.child-image-block img { width:100%;}
.child-content-block {position:relative; z-index:3;}