Tapeta CSS {background-color, background-image, color}
Jak ustawić tapetę graficzną w tle strony internetowej? W jaki sposób stworzyć tło w postaci zeszytu w kratkę, w linie albo ukośnej siatki?
Tapety graficzne umieszczone w tle są chętnie używanym elementem w każdym systemie operacyjnym. Podobne rozwiązanie można zastosować również na stronie internetowej.
Najprostszym rodzajem tapety jest powielany wzorek w postaci kafelków. Przypomina on płytki położone na podłodze czy na ścianach w łazience - zakładając, że wzór na każdej płytce jest identyczny. Niewątpliwą zaletą tego typu tapety jest fakt, że można nią pokryć dowolnie dużą powierzchnię. Jest to o tyle ważne, że nie wiemy z góry, jak dużym ekranem będzie dysponował użytkownik oglądający naszą stronę WWW. Przy tym pojedynczy kafelek ze wzorkiem może mieć małe wymiary, dzięki czemu strona będzie się ładować szybciej.
Kiedy mamy już przygotowaną grafikę pojedynczego kafelka tapety, wstawienie go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów:
body {
background-color: kolor tła;
background-image: url(ścieżka dostępu do obrazka);
color: kolor tekstu;
}- kolor tła
- Definicja koloru który wyświetli się w tle strony w następujących przypadkach:
- w miejscach gdzie grafika tapety będzie miała elementy przezroczyste (jest to możliwe np. w formacie GIF) lub półprzezroczyste (format PNG)
- przez krótki moment kiedy grafika tapety nie zdąży się jeszcze załadować, a strona będzie już widoczna w oknie przeglądarki
- jeśli nie uda się załadować grafiki z tapetą - np. ze względu na problemy z połączeniem internetowym bądź jeśli przeglądarka użytkownika nie obsługuje takiego formatu graficznego albo kiedy obrazek byłby uszkodzony bądź został wcześniej usunięty
- kiedy użytkownik zupełnie wyłączy wyświetlanie grafiki w swojej przeglądarce - ponieważ np. ma bardzo powolne lub drogie połączenie internetowe
- ścieżka dostępu do obrazka
- Lokalizacja gdzie znajduje się plik graficzny tapety
Inaczej niż w przypadku znacznika
<img src="...">w języku HTML, tutaj ścieżkę dostępu należy konstruować względem lokalizacji pliku z arkuszem stylów, a nie względem adresu dokumentu HTML! - kolor tekstu
- Definicja koloru tekstu strony
Tło obrazkowe strony (tapeta) zawsze powinniśmy ustalać jednocześnie z kolorem tła oraz tekstu całej strony.
Ponadto należy zadbać o odpowiedni kontrast pomiędzy tłem a kolorem tekstu, ponieważ w przeciwnym razie treść strony może się stać zupełnie nieczytelna. W praktyce oznacza to, że tapeta nie powinna być zbyt pstrokata ani zbyt jaskrawa, aby nie rozpraszała czytelnika.
Warto zauważyć, że można zaprojektować wzór tapety w taki sposób, żeby granice pomiędzy sąsiednimi kafelkami nie były widoczne, tzn. płynnie przechodziły jeden w drugi na kształt fantazyjnego dywanu lub wzorzystej tkaniny. W tym celu wystarczy zapewnić, aby wszystkie krawędzie wzorku z lewej strony kafelka znajdowały się na tej samej wysokości co po prawej stronie. Analogicznie należy postąpić dla górnej i dolnej krawędzi. Przykładowo, aby stworzyć efekt zeszytu w kratkę, wystarczy przygotować kwadratową grafikę z przecinającymi się liniami w formie krzyżyka. Kafelek nie zawsze jednak musi być kwadratowy. Dla uzyskania efektu zeszytu w linie wystarczy przygotować grafikę o wysokości odzwierciedlającej rozstaw linii, ale szerokości tylko jednego piksela. Proponuję poeksperymentować w dowolnym programie graficznym z różnymi wzorkami - to może być naprawdę dobra zabawa 🙂
Dla zainteresowanych
Jeśli chcesz dowiedzieć się więcej na temat dodatkowych możliwości przy ustawianiu tła obrazkowego na stronach internetowych, zobacz rozdział: Tło obrazkowe.
Przykład {background, color}
Poniżej znajdują się przykłady różnych grafik kafelków (aby były lepiej widoczne zostały powiększone i obramowane na czerwono) wraz z odpowiadającymi im tapetami.
Zeszyt w kratkę
Zeszyt w linie
Ukośna siatka
Pytania i odpowiedzi {background-color, background-image, color, background-attachment, background-position, background-repeat, background-size}
Jak ustawić obrazek jako tło w CSS?
W tym celu najlepiej w arkuszu stylów do selektora właściwego ciała dokumentu dodać deklaracje o odpowiednich wartościach. Na przykład jeśli plik tła nazywa się "obrazek.jpg" i znajduje się w tym samym katalogu na dysku komputera co arkusz stylów *.css, a jego kolorystyka jest przeważająco jasna, można się posłużyć następującą regułą stylów: body { background-color: white; background-image: url(obrazek.jpg); color: black; }. Polecenie to ustawi również biały kolor tła i czarny kolor tekstu. Dzięki temu jeśli z jakiegokolwiek powodu obrazek tła by się nie wyświetlił, mamy gwarancję, że strona pozostanie nadal czytelna.
Dlaczego nie wyświetla mi się obrazek w tle?
Jeżeli plik arkusza stylów *.css znajduje się w innym katalogu niż dokument *.html, ścieżkę dostępu do obrazka tła należy konstruować zawsze względem arkusza stylów. Ponadto innymi częstymi powodami niewyświetlania się obrazka mogą być: błędy literowe w nazwie pliku, niepodanie rozszerzenia nazwy pliku (niektóre systemy operacyjne, jak np. Windows, mogą go ukrywać) czy użycie w nazwie pliku polskich znaków diakrytycznych bądź spacji. Zaleca się także nie używać wielkich liter.
Jak rozciągnąć tło obrazkowe na całą stronę CSS?
Wymaga to zastosowania bardziej zaawansowanych własności stylów [zobacz rozdziały: Zaczepienie tła obrazkowego, Pozycja tła obrazkowego, Powtarzanie tła obrazkowego, Rozmiary tła obrazkowego]. W arkuszu stylów można wstawić np. następujący kod: body { background-attachment: fixed; background-color: white; background-image: url(obrazek.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; color: black; }. Tak wstawiona tapeta pozostanie nieruchoma przy przewijaniu strony, a przy tym wypełni całą powierzchnię strony z zachowaniem oryginalnych proporcji zdjęcia. Może być jednak przycięta po bokach albo na górze i na dole, jeśli nie będzie pasować do aktualnych proporcji wymiarów okna przeglądarki.