Responsywny Background attachment zdjęcie strony przypięte do sekcji

Question

Mam następujący kontener:

  <section class="invite"style="z-index: 2;" id="">
        <div class="d-flex" >
              <div class="row">
                <div class="col-sm  d-flex align-items-center rel">
                  <div class="blog col-sm  d-flex align-items-center"></div>
                  </div>
      
                  <div class="col-sm d-flex align-items-center">
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio expedita autem beatae ratione nam obcaecati amet vero qui corrupti. Magni quaerat vero molestiae. Unde obcaecati dolorem ipsam, aliquam animi minus minima! Explicabo quo accusantium neque architecto reprehenderit labore, voluptate temporibus sapiente doloribus iste fugiat, delectus eveniet corporis ipsa quibusdam sed porro! Labore porro voluptatibus cumque illo aspernatur earum tempora atque amet dignissimos totam in voluptas fugiat enim autem sapiente, exercitationem saepe ipsa, laboriosam provident. Delectus illum fugit blanditiis velit nulla deleniti excepturi tenetur perferendis, sequi omnis ipsum incidunt asperiores natus laudantium eveniet dignissimos, iusto qui soluta id exercitationem maiores repellendus?
                  </div>
              </div>
        </div>
    </section>



  <section class="invite"style="z-index:3;" id="">

      <div class="d-flex" >

        <div class="row">
          

            <div class="col-sm d-flex align-items-center">
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Omnis dolor, ullam recusandae porro, suscipit pariatur ipsa soluta libero deleniti placeat, praesentium consequuntur. Similique enim nihil ad, accusantium consequatur iste. Amet asperiores voluptatum, distinctio corrupti sapiente fugiat deleniti odit dolor accusamus animi ipsum esse, laborum alias iusto ullam consequatur. Sint facilis, corporis numquam culpa molestiae illum placeat voluptate, tempora cumque asperiores minima earum ea, perferendis omnis similique. Corrupti unde eos voluptate officiis nihil dicta atque consequuntur temporibus illum expedita explicabo id, corporis itaque quos vitae distinctio! Saepe et dolores harum laboriosam, nihil neque ea necessitatibus quidem maiores consectetur tenetur dolorum tempora?
            </div>
            <div class="col-sm  d-flex align-items-center rel">
              <div class="shop col-sm  d-flex align-items-center"></div>
            </div>
        </div>
        
    </div>
    </section>

nadałem klase która jest czarnym kwadratem prostokątek itd i jest ten tekst w środku

.blog{
    display: flex;
    align-items: center;
    justify-content:center;
    width:100%;
    height:60vh;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../../../public/assets/strona.png');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size:contain;
    z-index: 2;

}

po pierwsze nie mogę tego wycentrować po szerokości i zdjęcie strony ustawia się do lewej, po drugie to zdjęcie nie jest prawie wcale responsywne przy dwóch kolumnach. Zna ktoś sposób stylowania tego? Chciałbym mieć tam zdjęcie strony które jest attachment przy scrollowaniu i jest ustawione dokładnie w środku a przy dwóch kolumnach. Bardzo mało informacji jest na ten temat w internecie,
 

Comments

Gdy daje background-size: cover; zdjęcie pojawia mi się na drugiej połowie, gdy daje contain jest mniejsze niż pół ekranu, dlaczego tak się dzieje?

---

Możesz zamieścić kompletny kod źródłowy?

Answer 1

Z kodu zamieszczonego przez Ciebie ciężko jest odtworzyć Twój problem, ale ... próbowałeś takie ustawienie?

  background-size: cover;
  background-position: center center;

 

P.S

z-index only affects elements that have a position value other than static (the default).

Comments

O tym z-index wiedziałem, nie wspomniałem o tym w sumie ale widziałem ten błąd akurat. Twoja wskazówka center center, bardzo mi pomogła. Dzięki