Twitter bootstrap – div with responsive background img pull up content below

I’m trying to solve; having a responsive div, with a responsive background image. That pulls below content with re-size of said responsive div.

Everything responds, but the issue, is the below content remains reading height: CSS. I need the below content to pull up with the mentioned current responded div with background image. I would like to use twitter bootstrap for solution. I’m trying to not call a media query just to override height under a viewport res.

Simple Demo.

    <div class="row">
        <div class="bg"></div>
    </div>

    content content content content content content content content content content content content content content content content content content content content content content content content content content 

.bg {
    background: url('http://i.stack.imgur.com/jGlzr.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: contain; // doesn't matter if 100% auto or cover
    height: 300px;  
}

Update with actual code:

Based off of recommended solution I have tried implementing, reflective in code below: did not work. Also, think wrapping footer and other elements in a .row and declaring so many classes on one element isn’t optimal. But didn’t work anyway so doesn’t matter.

        <div class="container-fluid">
        <section class="row">
        <section class="col-xs-12 nonslidecont embed-responsive embed-responsive-16by9">




        </section>
        </section>

        <div class="row">
        <footer class="col-xs-12">
            Lorem ipsum dolor sit amet, alterum detraxit senserit duo no, vel eu quas minimum phaedrum. Dolorum iudicabit at nam. Docendi gloriatur inciderint pri ei, ea iuvaret facilisis sea, aliquam mediocrem eam no. Numquam probatus singulis id qui, te voluptatum contentiones has. Ei perfecto adipiscing sit. No vis dolor ignota ullamcorper. Ei dico prima qui, mucius propriae perpetua ad his, adolescens consetetur te sea. Sea an delectus efficiantur, et dicat mnesarchum usu. Graeci antiopam no sea, qui ei esse exerci detracto.
        </footer>
    </div>
</div>

CSS:

.nonslidecont { 
    width: 100%;
    height: 455px;
    background-image:url("../images/yooooo.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}