Внутри сетки фоновое изображение зависит от содержимого

Question

Это своего рода обман, чтобы объяснить, но я получил вложенную сетку, сетка внутри сетки выглядит так:

.footer {
    grid-area: footer;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.bottomdiv {
    grid-column-start: 1;
    grid-column-end: 2;
    text-align: center;
}

.leftdiv {
    background-image: url("../images/logo-sbbq4.png");
    opacity : 0.2;
    background-repeat: no-repeat;
    background-size: 20% 100%;
    background-position: -60px 0px;
}

.contactlogo {
    font-family: Neucha;
    font-size: 4vw;
    color: #000;
    margin: 30% 4vw;
}

У меня две проблемы, первая, вероятно, простая, как вы можете видеть, я хочу, чтобы bottomdiv проходил через нижнюю часть сетки 4 на 4.

Реальная проблема, которую я получил, это левый дивизион. У меня есть фоновое изображение, которое я хочу разместить выше. Изображение помещено, и все хорошо, но когда я пытаюсь добавить текст, поле влияет на изображение - я поместил его из-за CSS Cascadig природы, но это не помогло.

HTML выглядит так:

<div class="footer" id="kontakt">
      <div class="leftdiv contactlogo">
        My BBQclass
      </div>
      <div class="rightdiv contacttext">
        <ul>
          <li>Telefon: [phone]</li>
          <li>E-post: [e-mail]</li>
          <li>Postgiro: 784512-22</li>
        </ul>
      </div>
      <div class="bottomdiv ustext">Event, butiksevent, personalfester, fester och grillkurser. Kan även göra restaurang-gästspel med burgarna på begäran.</div>
    </div>

Итак, вот моя нубистская проблема... я хочу твоей превосходной помощи.