css - wordpress中的英雄图像背景没有将它的孩子放在里面

Question

我正在尝试在我的 wordpress 网站（创世纪主题）上制作英雄形象。我不想使用插件，我想从头开始。我一直在尝试在英雄图片部分中包含页面标题和快速简介（如下所示）

图 1

我当前的设置在全屏下工作正常，但是当屏幕较小时，简介会移出英雄形象，而英雄形象会变小并被导航栏挡住（见下文）

我希望简介始终出现在英雄形象中。当我将简介 div 移动到与英雄图像相同的 div 中时，由于某种原因，简介最终位于页脚下方。

我在下面留下了我的代码。如果你们想了解更多信息，请告诉我

<div style="width:100%">
<div style="position: absolute; top: 99px; overflow: auto; z-index: -1; width:100vw" aria-live="polite">
    <img style="/*height: 100%;*/ max-height:100% ;min-width: 100%; object-fit: cover;" src="https://mywordpress.site.com/wp-content/path-to-img/hero-image-scaled.jpg" alt="" />
</div>
    <div class="our-process-header">
        <div style="display: flex; align-items: center; justify-content: center; padding-top: 20px;">
            <p style="text-align: center;">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.  
            </p>
        </div>
        <p>&nbsp;</p>
    </div>
</div>

样式our-process-header如下

@media screen and (max-width: 1070px) {
 .our-process-header {
    width: 100%;
  }
}
@media screen and (min-width: 1300px) {
  .our-process-header {
    width: 50%;
  }
}

标签： csswordpressbackground-image