Есть ли способ поделиться фоном между элементами сетки?

Question

Я бы просто хотел, чтобы фоновое изображение использовало пространство из двух или более элементов сетки.

Я думал об использовании элемента контейнера, но что, если я просто хотел использовать фоновое изображение для двух элементов, а не для всего контейнера элемента?

HTML:

<div class="container">
    <header></header>
    <main></main>
    <advert></advert>
    <aside></aside>
    <footer></footer>
  </div>

CSS:

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 > 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
}

Answer 1

Или как это?

Я создал div (.sub), который оборачивается вокруг первого элемента, на который вы хотели воздействовать, и последнего элемента, на который вы хотели воздействовать, плюс все, что между ними.Затем я создал sub-div (.advert_back) вокруг любого элемента между ними, на который вы не хотели, чтобы исходный div имел общий фон.Как только вы создадите общий фон, добавьте простой фон к подразделу (в данном случае я просто сделал его белым), чтобы он «покрывал» фон, проходящий через него.

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;
}

.sub {
  background-image: url(https://cdn.pixabay.com/photo/2017/12/11/22/42/peacock-feathers-3013486_1280.jpg);
  color: #ffff;
}

header>a {
  color: black;
}

.advert_back {
  background-color: #ffff;
  color: black;
}

advert {
  grid-area: advert;
  background-image: url(./mi-vr-5.jpg);
  background-position-x: 50%;
  background-position-y: 30%;
  background-size: 1000px
}

<div class="container">
  <header>"{HEADER - I AM THE HEADER - HEADER}"</header>
  <div class="sub">
    <main>
      <p>Lorem ipsum dolor sit amet, no duo altera ornatus, omittam postulant mea ea. In eius nobis quaerendum nec, est saepe deserunt percipitur ei. Stet accusam consequuntur te eam, posse discere vix ex. Per ne accusam molestie.
      </p>
    </main>
    <div class="advert_back">
      <advert>"{ADVERT - BUY THIS NOW - ADVERT}" </advert>
    </div>
    <aside>
      <p>Docendi conclusionemque in duo, te qui persequeris definitiones. In has tollit rationibus complectitur. Cu eligendi aliquando qui, sea mentitum interpretaris ea. Veritus pertinax nam ei. Cum essent maiestatis at, eu mundi tempor blandit qui. Modo
        quando consequat mel at. Ne per omnesque torquatos, his partiendo petentium cu. Ei possit mentitum consectetuer usu, ne aliquip laoreet eam, agam possit qui ei. Vis augue imperdiet eu, an sed electram urbanitas. Cu moderatius neglegentur mel,
        debitis tacimates an has. Cu nam vide malis, quas elaboraret omittantur ex quo.</p>
    </aside>
  </div>
  <footer>"{FOOTER - I AM THE FOOTER - FOOTER}"</footer>
</div>

Answer 2

Это то, что вы искали?

Я добавил div (.sub) к 2 элементам, которые используют один и тот же фон.это дублируется.Я отправил другой ответ с другим результатом.

    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;

    }
    
   .sub{
      background-image: url(https://cdn.pixabay.com/photo/2017/12/11/22/42/peacock-feathers-3013486_1280.jpg)
   }

    header > 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
    }

    <div class="container">
        <header>"{HEADER - I AM THE HEADER - HEADER}"</header>
          <div class="sub">
            <main>
            <p>Lorem ipsum dolor sit amet, no duo altera ornatus, omittam postulant mea ea. In eius nobis quaerendum nec, est saepe deserunt percipitur ei. Stet accusam consequuntur te eam, posse discere vix ex. Per ne accusam molestie.

</p>
            
            </main>
          </div>
            <advert>"{ADVERT - BUY THIS NOW - ADVERT}"</advert>
          <div class="sub">
            <aside><p>Docendi conclusionemque in duo, te qui persequeris definitiones. In has tollit rationibus complectitur. Cu eligendi aliquando qui, sea mentitum interpretaris ea. Veritus pertinax nam ei. Cum essent maiestatis at, eu mundi tempor blandit qui.

Modo quando consequat mel at. Ne per omnesque torquatos, his partiendo petentium cu. Ei possit mentitum consectetuer usu, ne aliquip laoreet eam, agam possit qui ei. Vis augue imperdiet eu, an sed electram urbanitas. Cu moderatius neglegentur mel, debitis tacimates an has. Cu nam vide malis, quas elaboraret omittantur ex quo.</p></aside>
          </div>
            <footer>"{FOOTER - I AM THE FOOTER - FOOTER}"</footer>
      </div>