How can I prevent a background image from 'collapsing' when scrolling?

I'm designing a Wordpress template (site), but I'm having some trouble.

Basically on every page there's a horizontal nav across the top (not fixed to the top), and right below is a 100%-width (usually about 20%vh tall) picture with some text over it. In order to put the text over it and have it be changeable, I set the picture container as a <div> and then added the image as a 'background-image' with CSS.

However, when I make the page smaller (testing for responsiveness), all the content below the picture collapses on it. See the pictures attached to understand what I mean.

How can I set it so the content below the big picture doesn't collapse on it when the window is made smaller? I've tried 'min-height', but it hasn't seemed to work.

HTML:

<div id="introParagraph" class="m-b-2 p-y-2">  <!--- THE CONTAINER DIV -->
     <h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">Our <br> approach</h1>               
     <h3 class="text-xs-left col-md-3 col-md-offset-1 col-xs-6 m-t-1" id="question">How we         help you figure out what works for you and your business. <br><br> Click on the icons to learn more. </h3>                   
</div>

CSS:

@media (min-width: 650px){  /* I set it under media-query because the picture is grey on a mobile device-- the picture only shows on bigger screens */

#introParagraph{
    background:  url("../img/approach.png");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 45%;
}

Here are pictures where you can see my 'collapsing-in' problem, and how I want it to look when it's resized: