php - 如何防止 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

Brandon，我想你想将内部 div 设置为绝对定位并从那里开始使用它。你应该为内部 div 设置一个 ID，然后在你的外部 css 中给它一些属性，包括我提到的 position: absolute 。确保添加，position:relative;也添加到您的 introParagraph div。