Przejdź do treści

CSS / CSS dla zielonych

Tapeta

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;
}
W wyróżnionych miejscach należy wpisać odpowiednio:
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 graficznych 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

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 kratkę

To jest przykład tapety w postaci zeszytu w kratkę.

Zeszyt w linie

Zeszyt w linie

To jest przykład tapety w postaci zeszytu w linie.

Ukośna siatka

Ukośna siatka

To jest przykład tapety w postaci ukośnej siatki.

Komentarze

Zobacz więcej komentarzy

Facebook