title: Is there a way to share a background between Grid items?
body: <p>I'd simply like to have background-image use the space of two or more Grid items. </p>
  
  <p>I've thought of using the container element but what if I just wanted to use a background-image for two items rather than the entire element container?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;main&gt;&lt;/main&gt;
      &lt;advert&gt;&lt;/advert&gt;
      &lt;aside&gt;&lt;/aside&gt;
      &lt;footer&gt;&lt;/footer&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>header  {
    grid-area: header;
    display: flex;
    flex-flow: wrap;
    flex: 0 1 auto;
    justify-content: space-evenly;
    align-items: center;
    padding: 1em 0 1em 0;
  
  }
  
  header &gt; a  {
    color: black;
  }
  
  advert  {
    grid-area: advert;
    background-image: url(./mi-vr-5.jpg);
    background-position-x: 50%;
    background-position-y: 30%;
    background-size: 1000px
  }
  </code></pre>