Rozmiar, pozycja i powtarzanie tła

Tailwind nie stosuje obrazów tła bezpośrednio (ponieważ adresów URL obrazów nie można wyrazić jako nazw klas narzędziowych), ale zapewnia pełną kontrolę nad tym, jak zachowują się obrazy tła: nad ich rozmiarem, położeniem i sposobem powtarzania. Zwykle ustawia się obraz za pomocą stylu inline lub niestandardowej klasy CSS, a następnie używa narzędzi Tailwind do kontrolowania jego właściwości wyświetlania.

bg-cover i bg-contain to dwa najważniejsze narzędzia do ustawiania rozmiaru tła. bg-cover skaluje obraz tak, aby był możliwie duży i w całości pokrywał element, przycinając go w razie potrzeby — idealnie nadaje się do obrazów hero i teł rozciągniętych na całą szerokość. bg-contain skaluje obraz tak, aby w całości zmieścił się w elemencie bez przycinania — sprawdza się w przypadku logo i ikon używanych jako tło.

bg-auto wyświetla obraz tła w jego naturalnym rozmiarze w pikselach — bez skalowania. Jest to przydatne, gdy potrzebują Państwo precyzyjnej tekstury lub wzoru bez skalowania. W przypadku niestandardowych rozmiarów, które nie odpowiadają wartościom cover ani contain, należy użyć wartości dowolnych: bg-[length:50%_auto] ustawia szerokość tła na 50%, a wysokość na auto, co sprawdza się w przypadku wzorów tła zajmujących połowę szerokości.

Pozycjonowanie tła określa, gdzie obraz jest zakotwiczony w swoim kontenerze. Tailwind udostępnia dziewięć pozycji odpowiadających siatce 3×3: bg-top, bg-bottom, bg-left, bg-right, bg-center oraz cztery narożniki: bg-top-left, bg-top-right, bg-bottom-left, bg-bottom-right. W połączeniu z bg-cover pozycja określa, która część obrazu będzie widoczna po jego przycięciu.

W przypadku pozycji, których nie obejmuje dziewięć gotowych ustawień, należy użyć wartości dowolnych: bg-[center_25%] zakotwicza obraz na środku w poziomie i 25% odległości od górnej krawędzi. Jest to przydatne przy precyzyjnym umieszczaniu obiektu, na przykład twarzy na zdjęciu zespołu, w przyciętym obrazie karty. W przypadku precyzyjnych pozycji należy zawsze sprawdzić wygląd obrazu przy różnych rozmiarach obszaru widoku.

Powtarzanie tła określa, czy obraz jest kafelkowany w celu wypełnienia kontenera. bg-repeat powtarza obraz w obu kierunkach (zachowanie domyślne). bg-no-repeat wyświetla obraz dokładnie raz. bg-repeat-x powtarza go tylko w poziomie, a bg-repeat-y tylko w pionie. bg-repeat-round i bg-repeat-space oferują zaawansowane kafelkowanie, które zapobiega obcinaniu kafelków przy krawędziach.

bg-fixed sprawia, że obraz tła jest przytwierdzony względem obszaru widoku, a nie elementu — podczas przewijania użytkownik przewija treść, ale tło pozostaje nieruchome, tworząc efekt paralaksy. bg-local sprawia, że tło przewija się wraz z treścią elementu. bg-scroll (wartość domyślna) przewija tło wraz z elementem, ale nie wraz z jego treścią.

Zachowanie tła często musi zmieniać się przy różnych rozmiarach ekranu. Na urządzeniach mobilnych lepiej wyśrodkować obraz w inny sposób lub zastosować mniejsze przycięcie. Do dowolnego narzędzia tła można dodać prefiksy responsywne: bg-top md:bg-center wyświetla górną część obrazu na urządzeniach mobilnych, a na komputerach wyśrodkowuje obraz. Jest to ważne, aby zachować właściwy punkt skupienia obrazu tła przy każdej szerokości obszaru widoku.

Tło obrazu na całą stronę uzyskuje się przez ustawienie obrazu na kontenerze wypełniającym obszar widoku: min-h-screen określa wysokość, a bg-cover bg-center bg-no-repeat bg-fixed — zachowanie obrazu. Wewnątrz należy dodać kontener relative na treść, aby znalazła się nad tłem. Zawsze należy dodać półprzezroczystą warstwę nakładki, aby tekst pozostał czytelny na obrazie.

Jeśli to możliwe, należy używać znacznika <img> z object-cover i object-position zamiast obrazów tła — jest to lepsze pod względem dostępności (tekst alternatywny), SEO (obrazy możliwe do indeksowania) i wydajności (natywne leniwe ładowanie obsługiwane przez przeglądarkę). Obrazy tła należy rezerwować dla dekoracyjnych wzorów, tekstur oraz przypadków, w których obraz nie ma znaczenia semantycznego.

Oto krótkie zestawienie rodzin narzędzi tła: bg-cover / bg-contain / bg-auto służą do określania rozmiaru, bg-center / bg-top / bg-bottom / bg-left / bg-right — pozycji, bg-no-repeat / bg-repeat / bg-repeat-x / bg-repeat-y — kafelkowania, a bg-fixed / bg-local / bg-scroll — przytwierdzenia. Większość sekcji hero wykorzystuje bg-cover bg-center bg-no-repeat jako sprawdzoną bazę.

W tej lekcji nauczyli się Państwo, że: bg-cover skaluje obraz tak, aby wypełnił kontener, a bg-contain dopasowuje go bez przycinania, bg-center / bg-top / bg-bottom określają, która część obrazu jest zakotwiczona w ramce, a bg-fixed tworzy efekt paralaksy, natomiast bg-no-repeat zapobiega kafelkowaniu. W następnej części opanujemy skalę odstępów Tailwind do określania marginesów i dopełnień.