title: hero image background in wordpress not keeping it's children inside it
body: <p>I am trying to make a hero image on my wordpress site (genesis theme). I do not want to use a plugin, I want to make it from scratch. I am trying to have the title of the page and a quick blurb contained in the hero image section at all times (like below)</p>
  <p>IMG 1</p>
  <p>My current set up works fine at full screen, but when the screen is smaller,  the blurb moves out of the hero image and the hero image gets smaller and blocked by the navbar (see below)</p>
  <p><a href="https://i.stack.imgur.com/AnMNL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AnMNL.png" alt="full screen image" /></a></p>
  <p>I want the blurb to be in the hero image at all times. When I move the blurb div into the same div as the hero image, the blurb ends up under the footer for some reason.</p>
  <p><a href="https://i.stack.imgur.com/h1xvl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h1xvl.png" alt="smaller screen behavior" /></a></p>
  <p>I have left my code below. Please let me know if you guys would like more info</p>
  <pre><code>&lt;div style=&quot;width:100%&quot;&gt;
  &lt;div style=&quot;position: absolute; top: 99px; overflow: auto; z-index: -1; width:100vw&quot; aria-live=&quot;polite&quot;&gt;
      &lt;img style=&quot;/*height: 100%;*/ max-height:100% ;min-width: 100%; object-fit: cover;&quot; src=&quot;https://mywordpress.site.com/wp-content/path-to-img/hero-image-scaled.jpg&quot; alt=&quot;&quot; /&gt;
  &lt;/div&gt;
      &lt;div class=&quot;our-process-header&quot;&gt;
          &lt;div style=&quot;display: flex; align-items: center; justify-content: center; padding-top: 20px;&quot;&gt;
              &lt;p style=&quot;text-align: center;&quot;&gt;
  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.  
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;p&gt;&amp;nbsp;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The style for <code>our-process-header</code> is below</p>
  <pre><code>@media screen and (max-width: 1070px) {
   .our-process-header {
      width: 100%;
    }
  }
  @media screen and (min-width: 1300px) {
    .our-process-header {
      width: 50%;
    }
  }
  </code></pre>