Nagłówek z obrazem (Header)

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Pewnie znasz strony internetowe z imponującym zdjęciem w tle, które pokrywa cały ekran. Te sekcje wprowadzenia, zwane także Hero Section lub Hero Image, zdobyły sobie zasłużone uznanie.

Są piękne, to prawda. Jednak mogą powodować wiele frustracji, ponieważ dostosowanie ich wyglądu, aby prezentowały się dobrze zarówno na dużych ekranach, jak i na urządzeniach mobilnych, jest pewnym wyzwaniem.

Ale nie martw się tym. Dziś jest twój szczęśliwy dzień, ponieważ dowiesz się, jak tworzyć Hero Section, które zajmują całą stronę i nie tylko wyglądają olśniewająco, ale także doskonale działają na ekranach o różnych rozmiarach.

Zanurzmy się od razu w kodzie!

Krok 1 - dodaj obraz

Najpierw potrzebujemy obrazu o wystarczająco dużej rozdzielczości, aby pokryć nawet duże ekrany i aby nadal wyglądał dobrze.

Jednak uważaj, aby nie przesadzić. Grafika w rozdzielczości 4K, dodatkowo nie zoptymalizowana, może spowolnić twoją stronę internetową na tyle, że użytkownik opuści ją z irytacją, zanim zdąży wyświetlić stronę.

Co jest ważne, musimy dodać ten obraz nie jako element <img> ale jako tło background-image zwykłego elementu <div>. Dodatkowo, dodamy to jako CSS osadzone bezpośrednio w kodzie.

Dodaj poniższy kod do pliku index.html poniżej komponentu paska nawigacyjnego i powyżej zamykającego tagu </header>.

                                      
                                        </nav>
  <!-- Navbar -->

  <!-- Add only the code below -->

  <!-- Background image -->
  <div style="background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
  </div>

  <!-- Add only the code above -->

</header>
                                      
                                    

Po zapisaniu pliku i odświeżeniu przeglądarki, zauważysz, że... nic się nie zmieniło! Ale spokojnie, dopiero zaczynamy.

Ponieważ dodaliśmy to zdjęcie nie jako element <img> ale jako background-image(tło) normalnego </div>, musimy zdefiniować wysokość tego div. Domyślnie ma on wysokość 0, więc nasz obraz nie ma gdzie się wyświetlić.

Krok 2 - ustawienie wysokości obszaru obrazu

Dobra, więc ustalmy wysokość naszego div na, powiedzmy, 500px.

                                      
                                        <!-- Background image -->
<div style="height: 500px;
            background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
</div>
                                      
                                    

Po zapisaniu pliku zobaczysz, że wreszcie możesz zobaczyć zdjęcie! Ale coś jest nie tak. Po prawej stronie dzieją się jakieś dziwne rzeczy i wydaje się, że obraz kończy się i zaczyna od nowa.

Wynik jest naprawdę mało satysfakcjonujący. Widzimy tylko wierzchołek słynnego mostu Golden Gate, a grafika miała pokrywać cały ekran, a nie tylko 500 pikseli.

Krok 3 - naprawienie obrazu

Myślę, że musimy sięgnąć po magię MDBootstrap. Dodajmy klasę bg-image do tego div i zobaczmy, co się stanie.

                                      
                                        <!-- Background image -->
<div  class="bg-image"
      style="height: 500px;
            background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
</div>
                                      
                                    

To mi się podoba!

Klasa bg-image odpowiednio skaluje obraz i umożliwia responsywność.

Krok 4 - skalowanie obrazu na cały ekran

Teraz przeskalujmy obraz tak, aby zajmował całą powierzchnię ekranu zamiast 500 pikseli.

Usuńmy wpisaną na sztywno wysokość 500px i zamiast tego dodajmy klasę vh-100.

                                      
                                        <!-- Background image -->
<div  class="bg-image vh-100"
      style="
            background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
</div>
                                      
                                    

Po zapisaniu pliku i odświeżeniu przeglądarki zobaczysz, że obraz teraz pokrywa cały ekran.

Klasa vh-100 oznacza "viewport height" (wysokość widoku) i liczba "100" ustawia wysokość na 100% dostępnej wysokości widoku.

Jednakże, mamy problem. Chcieliśmy, żeby nasz obraz pokrywał dokładnie 100% dostępnej wysokości, ale z jakiegoś powodu pojawił się pasek przewijania w oknie przeglądarki. Oznacza to, że nasze zdjęcie wykracza trochę poza zamierzony obszar.

Krok 5 - Naprawa przewijania

Jeśli przyjrzysz się uważnie, zauważysz, że obraz wykracza poza ekran dokładnie o wysokość naszej nawigacji - czyli 58.59px.

Dzieje się tak, ponieważ do 100% wysokości widoku, ustawionej przez klasę vh-100, nawigacja dodała swoją wysokość. Musimy to wziąć pod uwagę i odjąć.

Do diva z obrazem dodajmy margin-top: -58.59px;. Dzięki temu grafika "przesunie się" pod nawigację dokładnie o jej wysokość i doskonale dopasuje się do rozmiaru ekranu.

                                      
                                        <!-- Background image -->
<div  class="bg-image vh-100"
      style="
             margin-top: -58.59px;
             background-image: url('https://mdbcdn.b-cdn.net/img/new/fluid/city/018.jpg');">
</div>
                                      
                                    

Po zapisaniu pliku i odświeżeniu przeglądarki zauważysz, że... nawigacja zniknęła! 😱 Wydaje się, że nasz obraz nie "przesunął się" pod nawigację, ale go zasłonił.

Krok 6 - Naprawa właściwości z-index

Więc musimy zdefiniować hierarchię widoczności. Skorzystamy z właściwości z-index, która kontroluje pionowy porządek nakładających się elementów.

Zasada jest prosta - im wyższa wartość z-index, tym wyższa hierarchia danego elementu, i będzie on widoczny nad elementami o niższej wartości z-index.

Domyślna wartość to 0. Dlatego ustawmy nawigację na z-index: 1;

                                      
                                        <!-- Navbar -->
<nav  style="z-index: 1;"
      class="navbar navbar-expand-lg navbar-dark bg-dark">
                                      
                                    

Po zapisaniu pliku i odświeżeniu przeglądarki zobaczysz, że nasza nawigacja wróciła, a obraz jest doskonale dopasowany do wielkości ekranu i nie ma paska przewijania.

Ostatnią rzeczą, którą warto tutaj zrobić, jest ustawienie wysokości samej nawigacji. Obecnie wynosi 58.59px, ale ponieważ nawigacja to elastyczny komponent i dostosowuje się do swojej zawartości, jej wysokość może się nieco zmienić, jeśli dodamy do niej elementy różne od naszej oczekiwanej wysokości.

Dlatego ustawmy wysokość nawigacji na minimum 58,59 pikseli.

                                      
                                        <!-- Navbar -->
<nav  style="z-index: 1;
             min-height: 58.59px;
            "
      class="navbar navbar-expand-lg navbar-dark bg-dark">
                                      
                                    

Uff, wreszcie skończone. Sporo pracy dla jednego obrazu. Ale teraz myślę, że zaczynasz rozumieć, dlaczego nagłówek z obrazem sprawiają tyle frustracji. Wyobraź sobie, ile kłopotu przysporzyłyby nam bez wsparcia Bootstrap i MDBootstrap 😬