Dodanie tła to ważny element tworzenia wyglądu strony. Tło pomaga stworzyć unikalny styl witryny. Istnieje kilka prostych sposobów dodawania tła. Wykorzystuje się do tego języki HTML i CSS.
Podstawy HTML i CSS w kontekście tła strony
HTML to język budowy szkieletu strony. Określa strukturę treści dokumentu. CSS opisuje wygląd i formatowanie elementów HTML. Twórcy stron internetowych głównie używają CSS. Ten język oferuje rozbudowane możliwości stylizacji. W HTML przypisywanie kolorów było bezpośrednie. Odbywało się w kodzie witryny. Było to mniej elastyczne rozwiązanie.
Każda strona internetowa na początku ma białe tło. Domyślna wartość elementu <body> to background:#FFFFFF. Aby zmienić domyślny kolor, można użyć atrybutu style w tagu <body>. Można też dodać atrybut bgcolor lub background. Te metody są jednak przestarzałe. Nowoczesne strony używają CSS.
Zdecydowanie łatwiej jest edytować konkretną klasę lub właściwość niż przeszukiwać całą stronę w poszukiwaniu jakieś cechy dodanej w HTML.
Zastosowanie CSS zapewnia większą kontrolę. Ułatwia zarządzanie stylami. Pozwala na centralizację wyglądu strony. Zmiany wprowadzasz w jednym miejscu. Wpływają one na wiele elementów. W pliku *.html może znajdować się tylko jeden znacznik <body>.
Dlaczego używać CSS zamiast HTML do tła?
CSS oferuje większą elastyczność i kontrolę nad wyglądem. Umożliwia oddzielenie struktury od prezentacji. Ułatwia zarządzanie stylami na całej stronie. Zmiany wprowadzasz w zewnętrznym pliku CSS.
Jak ustawić kolor tła w CSS?
Tło w CSS pozwala na dodawanie kolorów. Używa się do tego właściwości background-color. Możesz podać nazwę koloru, kod szesnastkowy (hex), wartości RGB lub HSL. Dostępne są też wersje RGBA i HSLA. Pozwalają one dodać przezroczystość. Odpowiedni kolor tła wpływa na czytelność tekstu. Ma też wpływ na ogólną estetykę strony. Kolor tła oraz tekstu ustala się razem. Zawsze dodawaj atrybuty do istniejącego znacznika <body>.
Przykłady wartości dla background-color:
- Nazwa koloru:
lightblue - Kod szesnastkowy:
#add8e6 - Wartość RGB:
rgb(173, 216, 230) - Wartość RGBA (z przezroczystością):
rgba(173, 216, 230, 0.5) - Wartość HSL:
hsl(195, 53%, 79%) - Wartość HSLA (z przezroczystością):
hsla(195, 53%, 79%, 0.5)
Podstawowe kolory to między innymi black, white, red, blue, green, yellow. Eksperymentuj z różnymi kolorami. Użyj narzędzi online. Pomagają one określić kod koloru.
-
Sugestia: Używaj kontrastujących kolorów tła i tekstu.
Jak zmienić kolor tła strony?
Kolor tła strony zmienisz za pomocą właściwości background-color w CSS. Przypisz ją do selektora body. Możesz użyć nazwy koloru, kodu hex, RGB, RGBA, HSL lub HSLA.
Jak dodać obraz jako tło w CSS?
Możesz wstawić grafikę lub zdjęcie jako tło. Służy do tego właściwość background-image. Podajesz ścieżkę do pliku obrazu. Używasz funkcji url(). Pierwszym krokiem jest wybór odpowiedniego obrazu. Dostosuj jego wybór do koncepcji strony. Przy wyborze grafiki zwróć uwagę na jej jakość. Format obrazu też ma znaczenie. Używaj formatów zoptymalizowanych dla sieci. Unikaj używania zbyt wielu obrazów. Mogą one spowolnić ładowanie strony. Zachowaj umiar przy dodawaniu tła. Nie pogorszy to czytelności tekstu.
Przykład użycia background-image:
body {
background-image: url('sciezka/do/obrazka.jpg');
}Możesz użyć ścieżki względnej lub bezwzględnej. Przykładowa ścieżka względna: url(../images/arrow2.png).
Jak wstawić tło z obrazem?
Obraz jako tło wstawisz używając właściwości background-image w CSS. Podaj ścieżkę do pliku obrazu w funkcji url() przypisanej do elementu, np. body.
Kontrola wyglądu tła obrazkowego
Właściwości tła w CSS wpływają na wygląd. Możesz kontrolować powtarzanie obrazu. Służy do tego background-repeat. Domyślnie obraz powtarza się. Wartości to repeat (powtarzaj), no-repeat (nie powtarzaj), repeat-x (powtarzaj w poziomie), repeat-y (powtarzaj w pionie). Przykład: repeat-x.
Możesz ustawić pozycję obrazu tła. Użyj właściwości background-position. Podajesz słowa kluczowe lub wartości liczbowe. Słowa kluczowe to top, bottom, left, right, center. Możesz łączyć słowa. Przykład: top right. Możesz też użyć procentów lub pikseli.
Rozmiar obrazu tła zmienisz właściwością background-size. Wartości to cover (pokryj cały obszar), contain (zawrzyj cały obraz). Możesz też podać konkretne wymiary. Przykład: 30% lub 200px 100px.
Kontrolujesz też przewijanie obrazu tła. Służy do tego background-attachment. Wartość scroll sprawia, że tło przewija się z treścią. Wartość fixed powoduje, że tło pozostaje nieruchome. Przykład: fixed. Nieruchomy obrazek w tle daje ciekawy efekt paralaksy.
Możesz jednoczyć dwa różne obrazki. Możesz też nałożyć kolor na obraz. Używasz do tego odpowiednich właściwości tła.
Tworzenie gradientów jako tła w CSS
Tło w CSS pozwala na dodawanie gradientów. Gradienty tworzą płynne przejścia kolorów. Możesz użyć gradientów liniowych lub radialnych. Tworzenie gradientu z CSS jest proste. Zastępują one obrazy gradientowe. Poprawia to wydajność strony.
Gradient liniowy tworzy się funkcją linear-gradient(). Podajesz kierunek i listę kolorów. Przykład: linear-gradient(to right, red, yellow).
Gradient radialny tworzy się funkcją radial-gradient(). Podajesz kształt, rozmiar, pozycję i listę kolorów. Przykład: radial-gradient(circle, red, yellow).
-
Sugestia: Używaj gradientów zamiast obrazów, gdy to możliwe. Poprawia to czas ładowania.
Łączenie właściwości tła – skrót background
CSS udostępnia skróconą właściwość background. Pozwala ona ustawić wiele właściwości tła jednocześnie. Podajesz wartości w określonej kolejności. Składnia to: background: [color] [image] [repeat] [attachment] [position] / [size]; Kolejność jest ważna. Nie wszystkie wartości są obowiązkowe. Przykład: background: #ffffff url("obraz.png") no-repeat center / cover fixed;
Użycie skrótu skraca kod CSS. Ułatwia zarządzanie stylami. Jest to popularna metoda.
Najlepsze praktyki przy dodawaniu tła
Dobrze dobrane tło pomaga w czytelności. Wpływa też na nawigację po stronie. Pamiętaj o kilku zasadach. Upewnij się, że tło nie utrudnia czytania. Tekst musi być wyraźny. Unikaj zbyt jaskrawych kolorów. Zapewnij odpowiedni kontrast. Testuj tła na różnych urządzeniach. Sprawdź wygląd na różnych rozdzielczościach. Korzystaj z narzędzi do podglądu CSS. Dostępne są w przeglądarkach internetowych. Pozwalają one eksperymentować z ustawieniami. Optymalizuj rozmiar obrazów tła. Stosuj kompresję bezstratną. Unikaj nadmiernego używania obrazów. Mogą one spowolnić ładowanie strony. Minimalizuj liczbę tła. Złożone tła zwiększają czas renderowania. Rozważ użycie gradientów. Zamiast obrazów. Poprawia to wydajność. Pamiętaj o dostępności. Zapewnij alternatywny tekst dla obrazów tła. Upewnij się, że tło jest widoczne dla osób z wadami wzroku.
-
Sugestia: Testuj tła na różnych urządzeniach i rozdzielczościach ekranu.
-
Sugestia: Korzystaj z narzędzi do podglądu CSS w przeglądarkach.
-
Sugestia: Upewnij się, że tło nie utrudnia czytania tekstu.
Jakie formaty obrazów są najlepsze dla tła?
Dla tła najlepiej używać formatów zoptymalizowanych dla sieci. Należą do nich JPG dla zdjęć i PNG dla grafik z przezroczystością. Format WebP oferuje lepszą kompresję.
Czy mogę użyć wielu obrazów tła jednocześnie?
Tak, CSS pozwala na ustawienie wielu tła dla jednego elementu. Oddzielasz je przecinkami we właściwości background-image lub skrócie background.
Zobacz także:
