Jak ustawić tło strony w CSS? Właściwość background i jej atrybuty

Ustawienie tła strony w CSS polega na użyciu właściwości background-color dla barw jednolitych lub background-image dla grafik przypisanych do selektora body. Najszybszą metodą jest zastosowanie zapisu skróconego background, który w jednej linii kodu łączy kolor, adres obrazu, powtarzalność oraz pozycjonowanie. Ten mechanizm daje programistom pełną kontrolę nad warstwą wizualną dokumentu HTML bez ingerowania w strukturę znaczników.

Jakie są podstawowe atrybuty właściwości background w CSS?

Właściwość background to tak naprawdę skrót. Zdejmuje z nas obowiązek pisania wielu linijek kodu. Przeglądarka internetowa rozbija tę jedną deklarację na szereg pojedynczych instrukcji. Używamy jej codziennie. A jednak potrafi zaskoczyć początkujących deweloperów. Jeśli w skróconym zapisie pominiesz jakiś atrybut, przeglądarka automatycznie nadpisze go wartością domyślną. To często prowadzi do irytacji, gdy wcześniej zadeklarowany kolor nagle znika po dodaniu nowej klasy.

Pojedyncze atrybuty dają znacznie większą precyzję. Zobaczmy, z czego składa się pełen zestaw narzędzi do malowania tła:

• background-color definiuje barwę pod spodem. Przyjmuje wartości w formacie szesnastkowym, funkcje RGB i HSL oraz predefiniowane nazwy angielskie. To absolutna podstawa. Jeśli obrazek z jakiegoś powodu się nie załaduje na wolnym połączeniu sieciowym u klienta, ten kolor uratuje czytelność tekstu na ekranie. Zawsze deklaruj barwę zastępczą.
• background-image ładuje grafikę.
• background-repeat decyduje o powielaniu kafelków. Domyślnie obraz powtarza się w osi X i Y.
• background-position ustala punkt startowy renderowania pliku graficznego.

Zawsze buduj strukturę od ogółu do detalu. Ja preferuję pisanie pełnych deklaracji w złożonych projektach. Skróty zostawiam na proste poprawki w małych modułach.

Jak działa background-color i formaty zapisywania barw?

Kolor tła ustawiamy najczęściej na głównym elemencie dokumentu. Pamiętaj, żeby nie przypisywać go do znacznika html, bo to generuje błędy przy przeliczaniu wysokości widoku na urządzeniach mobilnych. Przypinaj tło do body. Masz do wyboru cztery formaty zapisu. Każdy ma swoje techniczne uzasadnienie.

Przeglądarki traktują te zapisy równorzędnie. Silnik renderujący pod spodem i tak przelicza wszystko na matrycę pikseli ekranu. Zmiana formatu nie wpływa na czas ładowania strony.

Dlaczego obraz w tle strony się ucina albo powiela?

To najczęstszy błąd widywany na stronach małych firm. Wrzucają wielkie zdjęcie z drona i dziwią się, że na laptopie widać tylko lewy górny róg nieba. Za ten stan rzeczy odpowiada background-size i background-repeat. Domyślne zachowanie CSS zakłada wyświetlenie obrazu w jego naturalnej rozdzielczości. Jeśli ekran jest mniejszy, grafika zostanie ucięta. Jeśli ekran jest większy, grafika zacznie się powielać jak kafelki w łazience.

Aby nad tym zapanować, musimy użyć odpowiednich wartości dopasowania.

Wartość cover to ratunek dla pełnoekranowych sekcji. Przeglądarka skaluje obraz tak, by pokrył cały kontener. Proporcje zostają zachowane. Część grafiki wystająca poza krawędzie po prostu znika. To najlepsze wyjście dla zdjęć fotograficznych pełniących rolę tła pod nagłówkami.

Wartość contain wymusza zmieszczenie całego obrazu wewnątrz elementu. Nic nie zostaje ucięte. Pojawiają się puste przestrzenie po bokach lub na górze. Stosujemy to do logotypów i ikon, gdzie utrata choćby jednego piksela jest błędem krytycznym.

Czy background-attachment: fixed faktycznie psuje przewijanie na telefonach?

Tak. I to bardzo. Wartość fixed przywiązuje obraz do okna przeglądarki, a nie do przewijanego dokumentu. Daje to popularny efekt paralaksy. Na komputerach biurowych działa to dobrze. Na urządzeniach mobilnych to katastrofa wydajnościowa.

Zresztą prawda jest absolutnie taka, że walka z background-size: cover na mobilnym Safari w połączeniu z przyklejonym tłem to koszmar. Wczoraj siedziałem nad tym do trzeciej w nocy, bo nagle pasek adresu w iPhonie zaczął skakać przy scrollowaniu a klatki spadały do zera. Klient dzwonił rano z pretensjami. W końcu rzuciłem to wszystko i przepisałem tło na sztuczny pseudoelement z pozycją absolutną. To jest bez mała najgorsza opcja z wszystkich pod kątem czystości kodu, ale przynajmniej działa i nie dławi procesora telefonu.

Urządzenia firmy Apple celowo wyłączają lub ignorują background-attachment: fixed. Koszt ciągłego przeliczania pozycji obrazu przy dotykowym przewijaniu zabija baterię. Zamiast tego używaj właściwości position: fixed na oddzielnym elemencie HTML położonym na samym dole stosu warstw (z-index).

Jak połączyć kilka teł w jednym elemencie HTML?

CSS pozwala przypisać wiele warstw do jednego bloku. Rozdzielamy je zwykłym przecinkiem. Pierwsza zadeklarowana warstwa znajduje się najwyżej, najbliżej użytkownika. Ostatnia ląduje na samym dole. To mechanizm, który drastycznie zmniejsza liczbę zagnieżdżonych znaczników div w dokumencie.

Zapisujemy to następująco:

.hero-section {
  background-image: url("logo.png"), url("pattern.svg"), linear-gradient(to bottom, rgba(0,0,0,0.5), #000);
  background-position: center, top left, center;
  background-repeat: no-repeat, repeat, no-repeat;
}

W tym przykładzie logo leży na samej górze. Pod nim powtarza się drobny wzór wektorowy SVG. Na samym dnie wylaliśmy ciemny gradient, który przykrywa ewentualne niedoskonałości. Zauważ asymetrię deklaracji. Każdy przecinek w background-position odpowiada kolejnemu obrazowi z pierwszej linijki. Jeśli podasz mniej pozycji niż obrazów, przeglądarka zacznie je zapętlać od początku.

W jaki sposób CSS renderuje warstwy tła?

Silnik przeglądarki maluje stronę od dołu do góry. Najpierw wylewa jednolity background-color. To fundament. Następnie nakłada ostatni obraz z listy background-image. Potem przedostatni. Kończy na pierwszym zadeklarowanym pliku. Zrozumienie tego stosu warstw pozwala tworzyć skomplikowane efekty bez użycia Photoshopa.

Często nakładamy półprzezroczysty gradient na zdjęcie, żeby tekst był bardziej czytelny. Zrobienie tego w CSS zamiast w programie graficznym pozwala przeglądarce załadować czysty plik JPG, co oszczędza transfer. Gradient generuje procesor karty graficznej w ułamku sekundy.

Czym różni się zapis skrócony background od deklaracji pojedynczych?

Różnica polega na bezwzględnym nadpisywaniu właściwości. Kiedy piszesz background: #ff0000;, mówisz przeglądarce: „ustaw czerwony kolor i zresetuj wszystkie inne atrybuty tła do zera”. Jeśli wcześniej zadeklarowałeś piękny obrazek w klasie nadrzędnej, właśnie go usunąłeś. To powód frustracji wielu początkujących koderów.

Użycie background-color: #ff0000; zmienia tylko barwę. Obrazek, powtarzalność i pozycja zostają nietknięte.

Zastanawiacie się zresztą, dlaczego to na produkcji tak wyje na testach po wdrożeniu nowego motywu? Sam się nad tym borykałem dzisiaj u siebie we wtorek. Okazało się, że nowa wtyczka do WordPressa wstrzykiwała ogólny zapis background: none; w nadrzędnym kontenerze, psując całą kaskadę stylów. Zamieniliśmy te zasady na robocie na precyzyjne background-image: none; i problem ustąpił natychmiast.

Jak wygenerować gradient na tło bez spowalniania przeglądarki?

Gradienty w CSS to w rzeczywistości sztucznie generowane obrazy. Funkcje linear-gradient() oraz radial-gradient() zwracają wartość traktowaną przez silnik dokładnie tak samo jak plik z rozszerzeniem PNG. Różnica polega na tym, że pliku nie pobieramy z serwera. Przeglądarka rysuje go matematycznie w locie.

Składnia liniowego przejścia barw wymaga podania kierunku i tak zwanych punktów zatrzymania (color stops).

.tlo-gradient {
  background-image: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
}

Kierunek określamy w stopniach (deg) lub słowami kluczowymi (to right, to bottom right). Punkty zatrzymania mówią, w którym miejscu piksel ma przyjąć czystą wartość barwy. Przestrzenie między nimi są interpolowane przez algorytm. Możesz podać dziesięć różnych kolorów w jednym rzędzie. Zbyt duża liczba skomplikowanych gradientów radialnych na jednej stronie wywoła jednak skoki użycia procesora na starszych maszynach.

Zmieniliśmy niedawno podejście do animowania takich teł. Przejścia barw za pomocą transition na właściwości background-image są niesamowicie zasobożerne. Przeglądarka musi przerysowywać layout przy każdej klatce. Zamiast tego animujemy pozycję wielkiego, wygenerowanego wcześniej gradientu używając background-position. Daje to prawie pięćdziesiąt procent zysku na wydajności w testach audytowych Lighthouse.

Jakie błędy najczęściej popełniamy przy pozycjonowaniu tła?

Używamy procentów bez zrozumienia, jak działa ich przeliczanie. Zapis background-position: 50% 50%; wyśrodkuje obraz. To proste. Ale zapis background-position: 100% 100%; nie przesuwa lewego górnego rogu obrazu do prawego dolnego rogu kontenera. Procenty w tej właściwości działają inaczej niż w marginesach.

Przeglądarka dopasowuje punkt X% na obrazie do punktu X% na kontenerze. Zatem 100% 100% oznacza, że prawy dolny róg grafiki styka się z prawym dolnym rogiem bloku HTML. To logiczne rozwiązanie zapobiega „wyjeżdżaniu” obrazów poza obszar widoczności. Warto o tym wiedzieć, zanim zaczniesz ręcznie przeliczać piksele w kalkulatorze.

Co to jest dziedziczenie tła i czy background-color przenika przez elementy?

Domyślną wartością właściwości background-color w CSS jest transparent. Oznacza to pełną przezroczystość. Elementy HTML nie dziedziczą tła po swoich rodzicach w dosłownym sensie (jak dziedziczą fonty). One po prostu niczego nie zasłaniają. Dzięki temu kolor przypisany do body jest widoczny przez wszystkie puste nagłówki i akapity leżące powyżej.

Jeśli nadasz nagłówkowi kolor biały, przykryje on fragment szarego tła strony pod nim. To fizyczne układanie klocków. Żeby przywrócić przezroczystość na konkretnym elemencie po nadpisaniu go przez zewnętrzny arkusz stylów, po prostu TRZEBA wymusić to słowem kluczowym.

.przezroczysty-modul {
  background-color: transparent;
}

Taka technika przydaje się przy tworzeniu przycisków typu „ghost button”, które mają tylko obramowanie i tekst, a środek przepuszcza grafikę leżącą pod spodem.

Wydajność renderowania a duże pliki w tle

Pliki graficzne ważą. Jeśli ustawisz w CSS zdjęcie ważące 4 megabajty jako tło, zablokujesz wczytywanie tekstu na słabych połączeniach. CSS blokuje renderowanie do momentu pobrania arkusza stylów i sparsowania go z dokumentem. Obrazy zadeklarowane w background-image są ładowane asynchronicznie, ale opóźniają moment tak zwanego Largest Contentful Paint (LCP).

Zawsze optymalizuj pliki. Używaj formatu WebP lub AVIF zamiast starego JPG. Możesz użyć funkcji image-set() w CSS, by podać przeglądarce kilka formatów do wyboru.

.nowoczesne-tlo {
  background-image: image-set(
    url("zdjecie.avif") type("image/avif"),
    url("zdjecie.webp") type("image/webp"),
    url("zdjecie.jpg") type("image/jpeg")
  );
}

Przeglądarka pobierze tylko ten plik, który obsługuje natywnie. To drastycznie zmniejsza zużycie transferu. Wymaga to jednak wygenerowania trzech różnych wersji tego samego pliku na serwerze i dopisania paru linijek kodu więcej.

Pamiętaj o dostępności (accessibility). Tekst na zdjęciu w tle często staje się nieczytelny. Algorytmy badające kontrast nie potrafią przeanalizować skomplikowanej fotografii pod literami. Jeśli wrzucasz tekst na tło graficzne, dodaj ciemny półprzezroczysty gradient pod spodem. Zawsze weryfikuj wygląd witryny przy użyciu narzędzi deweloperskich i symulacji wad wzroku.

Jak zarządzać tłem w dobie zmiennych CSS (Custom Properties)?

Zmienne CSS zmieniły sposób budowania motywów. Zamiast pisać dziesiątki klas dla różnych wariantów kolorystycznych, deklarujemy główne barwy w pseudoklasie :root.

:root {
  --glowny-kolor-tla: #fafafa;
  --ciemny-motyw-tla: #121212;
}

body {
  background-color: var(--glowny-kolor-tla);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--ciemny-motyw-tla);
  }
}

Ten prosty kod automatycznie przestawia tło witryny na ciemne, jeśli użytkownik ma włączony tryb nocny w systemie operacyjnym Windows lub Android. Nie wymaga to ani grama JavaScriptu. Wszystko przelicza natywny silnik przeglądarki na podstawie zapytań medialnych. To standard, którego po prostu musisz dziś używać na każdej nowej stronie.

Podsumowując mechanizmy sterujące warstwą wizualną, musisz eksperymentować z parametrami na żywym organizmie. Otwórz edytor, wpisz kod, popsuj kilka układów i napraw je z dokumentacją w ręku. Idź i przetestuj background-clip: text by wyciąć gradient w kształcie liter nagłówka, bo suche czytanie o składni niczego cię nie nauczy.

FAQ – Najczęstsze pytania o tło w CSS

• Jak ustawić obrazek na tło strony w CSS?
  Aby ustawić obrazek na tło, należy przypisać właściwość background-image do selektora body. Używa się do tego funkcji url(), podając ścieżkę do pliku, np. background-image: url('tlo.jpg');. Dobrą praktyką jest dodanie właściwości background-size: cover, aby obraz pokrył cały ekran.
• Dlaczego tło w CSS się nie wyświetla?
  Najczęstszą przyczyną jest błędna ścieżka do pliku w funkcji url(). Jeśli plik CSS znajduje się w innym folderze niż plik HTML, należy użyć odpowiedniego zapisu z kropkami (np. url('../images/tlo.jpg')). Innym powodem może być literówka w nazwie właściwości lub nadpisanie reguły przez inną klasę o wyższym priorytecie.
• Jak zrobić gradient jako tło w CSS?
  Gradienty ustawiamy za pomocą właściwości background-image, używając funkcji linear-gradient() lub radial-gradient(). Podstawowy zapis dla przejścia od lewej do prawej wygląda tak: background-image: linear-gradient(to right, red, blue);.
• Jak dopasować wielkość tła do rozdzielczości ekranu?
  Należy zastosować właściwość background-size z wartością cover. Rozciąga ona grafikę proporcjonalnie w taki sposób, aby całkowicie wypełniła dany element HTML, ignorując puste marginesy, choć może delikatnie przyciąć krawędzie zdjęcia.
• Jak zablokować przewijanie tła strony (efekt paralaksy)?
  Aby obraz w tle pozostał nieruchomy podczas przewijania tekstu, użyj właściwości background-attachment: fixed;. Miej jednak świadomość, że ta reguła powoduje silne spadki wydajności na przeglądarkach mobilnych, zwłaszcza w systemie iOS.
• Czy mogę nałożyć na siebie dwa tła w CSS?
  Tak. CSS obsługuje wielokrotne tła przypisane do jednego elementu. Rozdziela się je przecinkiem w deklaracji background-image. Element zadeklarowany jako pierwszy wyświetla się na samej górze, najbliżej użytkownika.

Bibliografia i źródła

1. MDN Web Docs – https://developer.mozilla.org
2. W3C – https://www.w3.org
3. CSS-Tricks – https://css-tricks.com
4. Web.dev – https://web.dev
5. Can I Use – https://caniuse.com