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,