Table header not sicking below fixed element CSS

Question

The table headers in .part2 table were perfectly sticky when this was the code. Pay attention to the image with class "banner" which is basically a header banner image. I'll post the css below too

<div class="row tab">
        <div class="sticky-top">
          <div class="row story">
            <img class="banner" height="300" src="{% static 'images/SERT-header-no logo-solid-20%.png'%}">
            <div class="text">
              <h1>Part 2 Instructions</h1>
              <p>For this part, you are going to read some sentences that might or might not sound like you. Just like before,
                please tell us how much you agree or disagree with each sentence.
                Please choose the answer that best describes you and remember that there are no “right” or “wrong” answers!</p>
            </div>
          </div>
        </div>


        <div class="row">
          <div class="col-1"></div>
          <div class="col-10">
              <div class="row answers">
                  <table class="part2">

                    <thead>
                      <tr>
                        <th></th>
                        <th>Strongly Disagree</th>
                        <th>Disagree</th>
                        <th>Neutral</th>
                        <th>Agree</th>
                        <th>Strongly Agree</th>
                        <th>Choose Not to Answer</th>
                      </tr>
                    </thead>

CSS:

th {
  background: white;
  position: sticky;
  top: 300px; /* Don't forget this, required for the stickiness */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

.part2 {
  position: relative;
}

The header image was getting messy in a mobile screen, so I changed the way it was being rendered. Instead of having a div with an image tag with the banner, I made it an empty div and added the banner as the background image for the div (notice the div with class name demo)

<div class="tab">
        <div class="sticky-top" style="height: 320px">
          <div class="story demo">
            <div class="text">
              <h1>{% block p2 %} {% endblock %}</h1>
              <p>{% block p2-info %}{% endblock %}</p>
            </div>
          </div>
        </div>


        <div class="row no-gutters">
          <div class="col-1"></div>
          <div class="col-10">
              <div class="row answers">
                  <table class="part2">
                    <thead>
                      <tr>
                        <th></th>
                        <th class="header">Strongly Disagree</th>
                        <th class="header">Disagree</th>
                        <th class="header">Neutral</th>
                        <th class="header">Agree</th>
                        <th class="header">Strongly Agree</th>
                        <th class="header">Choose Not to Answer</th>
                      </tr>
                    </thead>

CSS:

.demo {
  /* object-fit: contain; */
  background-image: url('images/SERT-header-no\ logo-solid-20%.png');
  background-repeat: no-repeat;
  position: fixed;
  top:0;
  width: 100%;
  min-height: 300px;
  max-height: 300px;
  background-size: 100% 300px;
}

Right after making this change to the header banner. I've been facing a major issue where the table headers just won't stick anymore. (The CSS for the table remains the same)

Could someone tell me how I can make table headers stick below an image that has the property of position: fixed or something I should add to the table header css to make it stick with the new background image code?