• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
116 wizyt
pytanie zadane 30 października 2021 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)

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,
 

komentarz 30 października 2021 przez Grzegorz Mikina Dyskutant (8,060 p.)
przeniesione 31 października 2021 przez Comandeer
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?
komentarz 30 października 2021 przez overcq Pasjonat (21,540 p.)
Możesz zamieścić kompletny kod źródłowy?

1 odpowiedź

0 głosów
odpowiedź 30 października 2021 przez VBService Ekspert (251,210 p.)
wybrane 31 października 2021 przez Grzegorz Mikina
 
Najlepsza

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).

komentarz 31 października 2021 przez Grzegorz Mikina Dyskutant (8,060 p.)
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

Podobne pytania

0 głosów
1 odpowiedź 151 wizyt
0 głosów
3 odpowiedzi 592 wizyt
pytanie zadane 14 grudnia 2016 w HTML i CSS przez Paweł Kieryk Początkujący (450 p.)
0 głosów
2 odpowiedzi 189 wizyt
pytanie zadane 1 sierpnia 2020 w HTML i CSS przez Kacperhehe Bywalec (2,930 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...