在网格背景图像内受内容影响

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网格底部。

我得到的真正问题是leftdiv。 我有一个背景图像，我想在上面放置一个文本。 放置图像并且一切都很好但是当我尝试添加文本时，边距会影响图像 - 由于CSS Cascadig的性质，我把它放在了下面，但没有帮助。

html看起来像这样：

<div class="footer" id="kontakt">
      <div class="leftdiv contactlogo">
        My BBQclass
      </div>
      <div class="rightdiv contacttext">
        <ul>
          <li>Telefon: 245213654</li>
          <li>E-post: me@inter.net</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>

所以这是我的无聊问题......希望得到你的出色帮助。