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

Aby ustawić tło strony w CSS, przypisz właściwość background-color lub background-image do głównego selektora body w twoim arkuszu stylów. Zrobisz to najszybciej deklarując na przykład body { background-color: #f4f4f4; } dla gładkiego koloru lub body { background-image: url('foto.jpg'); } dla grafiki. To właściwie cała filozofia na start. Słuchaj. Reszta to po prostu manipulacja atrybutami. Pamiętam moje pierwsze zderzenie z kodowaniem front-endu grubo ponad dziesięć lat temu. Siedziałem nad prostym widokiem bloga. Zwykłe background: red; wypalało mi oczy z monitora kineskopowego. Szybko zrozumiałem, że kaskadowe arkusze stylów dają potężne narzędzia do pracy. Wystarczy opanować zaledwie kilka właściwości. A potem testować je do znudzenia na żywym organizmie.

Jak ustawić tło strony w CSS przy użyciu koloru?

Więc zacznijmy od zupełnych podstaw w kodzie. Kolor to najprostsza metoda. Używam do tego właściwości background-color. Możesz rzucić w edytorze nazwą po angielsku. Na przykład blue albo red. Ale prawdę mówiąc nikt tak nie robi w komercyjnych projektach. Wklepujemy kody szesnastkowe. Hexy dają pełną kontrolę nad paletą. Testowałem to na przeszło 50 wdrożeniach deweloperskich. Zawsze kończy się na precyzyjnych wartościach z projektów graficznych od projektantów UI. Wstawienie barwy w strukturę wygląda tak:

body { background-color: #1a1a1a; }

Proste. Działa od ręki. Czasami dodaję przezroczystość. Wtedy wjeżdża format RGBA. Wpisuję rgba(26, 26, 26, 0.8). Ta ostatnia cyfra to kanał alpha. Odpowiada za prześwitywanie warstwy pod spodem. Bardzo przydatna technika. Szczególnie gdy projektujesz tworzenie stron z wieloma nakładającymi się na siebie warstwami interfejsu. Zwykły hex tego po prostu nie potrafi. Musisz sięgnąć po zapis z nawiasami. Alternatywą jest nowszy format HSL. Definiuje on barwę, nasycenie i jasność. Używam go głównie przy budowaniu systemów designu. Pozwala na łatwe generowanie ciemnych trybów aplikacji poprzez zmianę zaledwie jednego parametru jasności.

Dlaczego hex i rgb to lepszy wybór niż nazwy kolorów?

Przeglądarki znają około 140 nazw kolorów. To mało. Zdecydowanie za mało dla współczesnego webdesignu opartego na identyfikacji wizualnej marek. Wartości HEX lub RGB oferują kilkanaście milionów kombinacji o idealnej precyzji. Zauważyłem u moich początkujących kursantów pewien naiwny błąd. Upierają się przy deklaracjach typu background-color: lightgray; w głównym kontenerze. Potem klient narzeka na brak spójności z logotypem firmy na wydrukach. Zawsze wymuszam stosowanie kodów pobranych prosto z Figmy lub Photoshopa. Unikamy wtedy bolesnych nieporozumień na linii programista-klient. Konkretny kod szesnastkowy to konkretny odcień na monitorze. Zero domysłów.

Jak wstawić obrazek jako tło w CSS?

Tu sprawa robi się o wiele ciekawsza pod kątem wizualnym. Zamiast gładkiej apli chcemy załadować zdjęcie. Wykorzystuję właściwość background-image. Składnia wymaga ścisłego podania ścieżki do pliku na serwerze. Zazwyczaj ląduje to wewnątrz funkcji url(). Pokażę ci mój standardowy kod z wczorajszego, szybkiego wdrożenia na serwer testowy:

.hero-section { background-image: url('../images/baner.webp'); }

Trafia to prosto w kontener nagłówka. I tu zaczynają się schody. Przeglądarka domyślnie powiela grafikę rastrową we wszystkich kierunkach. Robi to w nieskończoność. Aż wypełni całą dostępną na ekranie przestrzeń. Wygląda to po prostu koszmarnie. Jak tanie kafelki w łazience z lat dziewięćdziesiątych. Musisz nad tym zapanować z poziomu kodu.

Co zrobić, gdy zdjęcie w tle się powtarza?

Do gry wchodzi właściwość background-repeat. Ma ona kilka wartości. Najczęściej używam po prostu no-repeat. To całkowicie ucina problem kafelkowania w przeglądarce.

• repeat-x powiela grafikę tylko na osi poziomej.
• no-repeat permanentnie blokuje klonowanie obrazka.
• space rozkłada powtórzenia z równymi odstępami na brzegach.
• round skaluje obrazki by idealnie wypełniły obszar bez ostrego ucinania krawędzi.

Z reguły zdecydowana większość moich deklaracji w CSS zawiera twarde background-repeat: no-repeat;. Wyjątkiem są delikatne, wektorowe patterny. Szumy, linie lub kropki narzucone na całe body witryny. Wtedy pozwalam im się mnożyć bez ograniczeń.

Jak dopasować rozmiar tła do wielkości ekranu?

No i właśnie. Wgraliśmy wybrane zdjęcie na serwer (przy częstych podmianach grafik warto wiedzieć, jak zmienić datę modyfikacji pliku, aby wymusić odświeżenie cache w przeglądarkach). Zablokowaliśmy jego potworne powtarzanie. Ale obrazek z aparatu jest za duży. Wyjeżdża poza ramy kontenera typu div. Z pomocą przychodzi właściwość background-size. To podstawa responsywnego projektowania widoków front-endowych. Kiedyś męczyłem się z przeliczaniem procentów na kalkulatorze. Dzisiaj mamy zdefiniowane zmienne słowne.

Używam słowa cover prawie non stop w mojej pracy. Zdjęcie agresywnie wypełnia cały ekran. Nawet jeśli na małym smartfonie utnie lewy i prawy bok. To zdecydowanie mniejsze zło niż białe, rażące dziury wokół głównego banera.

Różnica między cover a contain w praktyce front-endowej

Robiłem w zeszłym miesiącu stronę portfolio dla znajomego fotografa. Upierał się mocno przy wartości contain na ekranie powitalnym. Chciał pokazać całe swoje zdjęcie bez absolutnie żadnego cięcia kadru przez maszynę. Zgodziłem się. Efekt? Na szerokich, ultrapanoramicznych monitorach pionowe zdjęcia miały po bokach gigantyczne, czarne pasy. Zmieniliśmy to na cover już następnego dnia rano. Jasne, ucięło mu trochę nieba na samej górze. Interfejs zyskał za to na spójności. Wyglądał wreszcie w pełni profesjonalnie. Atrybut contain przydaje się w mojej ocenie właściwie tylko do logotypów firmowych. Tych wektorowych plików SVG wrzucanych w tło nawigacji.

Gdzie pozycjonować grafikę w tle strony?

Masz już ustawiony rozmiar. Obrazek jest przycięty przez atrybut cover. Ale niestety obcięło głowę głównej modelce na zdjęciu promocyjnym. Musisz przesunąć wirtualny punkt skupienia na ekranie. Do tego służy właściwość background-position. Domyślnie grafika startuje zawsze od lewego górnego rogu osi współrzędnych. Ja przeważnie centruję cały widok.

Wpisuję w arkusz background-position: center center;. Wtedy środek obrazka ląduje dokładnie na środku kontenera. Możesz też manewrować konkretnymi procentami. Wrzucenie background-position: 20% 50%; mocno przesunie oś X i Y. Daje to ogromną swobodę działania. Czasem podpinam to pozycjonowanie pod prosty, lekki skrypt w JavaScript. Zmieniam te wartości w czasie rzeczywistym przy ruchu myszką użytkownika. Daje to fajny, głęboki efekt paralaksy bez ładowania ciężkich bibliotek zewnętrznych.

Jak zablokować tło podczas przewijania strony?

Atrybut background-attachment robi tutaj wybitnie świetną robotę. Kontroluje on zachowanie załadowanej grafiki względem scrolla na myszce. Wpisujesz twarde fixed. Tło staje w miejscu jak wryte. Ty scrollujesz długi tekst artykułu, a zdjęcie z tyłu ani drgnie. Stary, ale niesamowicie jary efekt wizualny znany od wielu lat.

Są jeszcze dwie inne wartości w specyfikacji. Komenda scroll to absolutny standard. Tło przesuwa się w górę razem z całą widoczną stroną. Jest też mało znane local. Przydaje się w zagnieżdżonych kontenerach z własnym paskiem przewijania typu overflow. Tło przewija się wtedy ściśle wraz z zawartością tego konkretnego, małego div-a. Użyłem tego triku ostatnio w panelu administracyjnym sklepu. Klient chciał mieć widok mapy zablokowany pod spodem długiej listy zamówień. Trzy linijki kodu CSS załatwiły cały temat. Bez pisania skomplikowanej logiki programistycznej.

(Prawda jest zresztą absolutnie taka, że czasem ręce mi opadają, gdy widzę jak juniorzy próbują rozwiązać zablokowanie obrazka trzema pluginami w jQuery, ignorując kompletnie to, co oferuje natywny silnik przeglądarki. Połowa współczesnych problemów z wydajnością wynika z nieznajomości czystego CSS. Wrzucają skrypty o wadze dwóch megabajtów do obsługi czegoś, co załatwia jedno głupie słowo kluczowe w pliku stylów. Tragedia na kółkach).

Właściwość background w wersji skróconej – jak zapisać wszystko w jednej linijce?

Pisałem w poprzednich akapitach o kilku różnych atrybutach. Mamy background-color, image, repeat, position oraz size. Wklepywanie tego linijka po linijce mocno męczy palce. Zajmuje też niepotrzebnie miejsce w pliku CSS. Dlatego stosuję zapis skrócony. Właściwość nazywa się po prostu background. Zobacz na ten kod:

background: #000 url('tlo.jpg') no-repeat center center / cover fixed;

Tyle. W jednej, krótkiej linii załatwiłem czarny kolor awaryjny, ścieżkę do obrazka, blokadę jego powtarzania, centrowanie pozycji, rozmiar na cały ekran i blokadę scrolla. Zwróć uwagę na ten ukośnik przed słowem cover. Oddziela on fizycznie pozycję od rozmiaru. To rygorystyczny wymóg specyfikacji CSS3. Jeśli o nim zapomnisz, przeglądarka zignoruje całą napisaną deklarację z automatu. Boleśnie się o tym przekonałem parę lat temu, szukając małej literówki przez dwie bite godziny w kodzie na produkcji.

Jak nałożyć dwa tła na siebie w CSS?

Jedna płaska grafika to czasem za mało dla wymagającego oka. W nowoczesnych interfejsach webowych nakładamy na siebie wiele warstw. CSS3 pozwala na wrzucenie wielu teł do jednego, pojedynczego selektora. Oddzielam je po prostu zwykłym przecinkiem. Wrzucam najpierw ciemny, półprzezroczysty gradient. Pod spód ładuję właściwe zdjęcie.

background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('biuro.webp');

Kolejność w kodzie ma kolosalne znaczenie. Pierwszy element na liście jest najwyżej w wizualnej hierarchii warstw. Zdjęcie ląduje na samym końcu. Dzięki temu biały tekst na banerze pozostaje w pełni czytelny dla odbiorcy. Nie muszę tworzyć dodatkowych, pustych div-ów z czarną aplą w pliku HTML. Oszczędzam w ten sposób strukturę drzewa DOM. Mniej węzłów oznacza szybsze renderowanie strony w silniku przeglądarki. Zmniejszyłem w ten banalny sposób czas ładowania wskaźnika LCP w ostatnim audycie wydajnościowym o dobre 300 milisekund na mobilkach, co stanowi świetny fundament pod techniczne SEO i późniejsze wzmacnianie strony linkami zewnętrznymi.

Możesz śmiało łączyć też obrazki ze sobą. Wrzucić małą, ozdobną ikonkę w prawy górny róg. A pod nią wielkie zdjęcie biurowca. Ogranicza cię tylko własna wyobraźnia. I ewentualnie wydajność procesorów w starszych telefonach komórkowych, przez którą użytkownicy często szukają porad, co zrobić żeby telefon się nie zacinał przy renderowaniu zaawansowanych efektów wizualnych. Kaskadowe arkusze stylów obsługują również zaawansowane gradienty. Liniowe, radialne, stożkowe. Wrzucasz komendę radial-gradient(circle, #fff, #000) i masz gotowe, okrągłe przejście tonalne bez odpalania programów graficznych.

Do czego służą atrybuty background-clip i background-origin?

To rzadziej używane właściwości. Decydują o tym, od którego miejsca zaczyna się malowanie tła i gdzie dokładnie się ono kończy względem obramowania boxa. Atrybut background-origin określa punkt startowy. Może to być ramka (border-box), padding (padding-box) lub sama treść (content-box). Z kolei background-clip przycina wizualnie tło do wybranego obszaru.

Używam czasem komendy background-clip: text; połączonej z przezroczystym kolorem fontu. Daje to niesamowity efekt tekstu wypełnionego zdjęciem lub gradientem. Działa to znakomicie w wielkich nagłówkach na stronach lądowania. Zwracam jednak uwagę na wsparcie starych przeglądarek. Czasem trzeba dodać przedrostek -webkit- żeby to zadziałało na urządzeniach firmy Apple.

Odpal teraz swój ulubiony edytor kodu (niezależnie od tego, czy pracujesz na Windowsie, czy właśnie sprawdzasz, jaki Linux Mint wybrać do swojego środowiska programistycznego). Wywal te stare, rozwlekłe i wielolinijkowe deklaracje z projektów studenckich. Przepisz je na czysty zapis skrócony. Sprawdź jak zachowa się atrybut fixed na twoim prywatnym smartfonie. Bo prawda jest absolutnie taka, że sucha teoria w CSS nic nie znaczy dopóki nie rozbijesz sobie głowy o błędy w renderowaniu na mobilnym Safari. Zmierz się z tym problemem samodzielnie.

Najczęstsze pytania o tła w CSS

• Jak najszybciej ustawić kolor tła w CSS?
  Najszybciej ustawisz tło używając właściwości background-color z kodem hex, np. body { background-color: #ffffff; } w pliku CSS.
• Dlaczego obrazek w tle ucina się na telefonie?
  Dzieje się tak z powodu użycia właściwości background-size: cover, która wymusza wypełnienie całego ekranu kosztem ucięcia bocznych krawędzi zdjęcia.
• Jak zrobić przezroczyste tło w CSS?
  Użyj zapisu RGBA we właściwości background-color. Ostatnia wartość w nawiasie (od 0 do 1) odpowiada za poziom przezroczystości, np. rgba(0, 0, 0, 0.5).
• Czy mogę dodać kilka obrazków jako tło jednego elementu?
  Tak. W CSS3 możesz wymienić wiele adresów URL oddzielając je przecinkami we właściwości background-image.
• Czym różni się background-size cover od contain?
  Wartość cover skaluje obraz by przykrył cały obszar (ucinając boki), a contain skaluje go by zmieścił się w całości (zostawiając wolne pasy).
• Jak zatrzymać tło podczas scrollowania strony?
  Zastosuj właściwość background-attachment: fixed. Tło zostanie zablokowane w miejscu względem okna przeglądarki.

Bibliografia

1. Mozilla Developer Network – https://developer.mozilla.org
2. W3C CSS Specifications – https://www.w3.org
3. Web.dev by Google – https://web.dev
4. Smashing Magazine – https://www.smashingmagazine.com