如何防止div上的背景图像在某个调整大小之后折叠？

Question

我正在构建一个Wordpress模板（使用PHP）。

我的基本页面设置：

1. 导航栏位于顶部（未固定;滚动时消失）
2. 带有文字的100％宽度图片（因此我使用背景图片的原因）
3. 其余内容

我的问题是当我尝试调整窗口的高度（使其变小）时，图片会坍塌，并将文字留在空间中。如何对此进行编码以使背景图像缩小以包含单词，然后在到达时停止缩小？ （图片包含在底部）。

这是我的HTML：

<!-- div w/ BG image -->
 <div id="introParagraph" class="m-b-2 p-y-2">    
     <h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">Our <br> approach</h1>

<!-- Inner div that styles a paragraph inside pic -->        
   <div class="col-md-3 col-md-offset-1 col-xs-6 m-t-1">
     <h3 class="text-xs-left" 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>
 </div>

这是我的CSS：

 /******** MEDIA QUERIES *********/

@media (min-width: 650px){

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

最后，这里是PHP的完整代码：

<!--------------- Approach Intro -------------------->
        <div id="introParagraph" class="m-b-2 p-y-2">
            <?php
                if (have_rows('approach_introduction')):while(have_rows('approach_introduction')):the_row();
            ?>
            <h1 class="text-xs-left col-xs-10 col-md-offset-1 m-b-1">
                <?php
                    the_sub_field('page_header');
                ?>
                </h1>
            <div class="col-md-3 col-md-offset-1 col-xs-6 m-t-1">
                <h3 class="text-xs-left" id="question">
                    <?php
                        the_sub_field('page_description_paragraph');
                    ?> 
                    <br><br> Click on the icons to learn more. </h3>
            </div>
            <?php   endwhile;
            else :
                // no rows found
            endif;
            ?>
        </div>

想看看会怎样做的图像：

图像显示它看起来像是上载，没有滚动（除了我想在大图上方的白色空间中的水平导航）：

Answer 1

布兰登，我想你想把那个内部div设置为绝对位置并从那里开始玩弄它。你应该为内部div设置一个ID，然后在你的外部css中给它一些属性，包括那个位置：我提到的绝对值。确保添加，位置：相对;也是你的introParagraph div。