(Pierwsza publikacja tego artykułu: rok 1998)
Jak umieszczać na stronie tło w zgodzie ze specyfikacją HTML i CSS…
Graficzne tło strony musi być zawsze stosowane z umiarem. Wciąż jest sporo stron, które straszą obłędnymi kolorkami i deseniem podobnym do budyniu brzoskwiniowego zabełtanego z sokiem wiśniowym… Brrr. Do tego zastosowanie dużej grafiki powoduje problem z otwarciem strony, bo ta nagle robi się bardzo „ociężała”. Z kolei mała rozmiarem i wagą grafika przy zastosowaniu tradycyjnej metody ustawiania tła:
<BODY BACKGROUND="tlo.gif">
sprawia czasami kłopot, bo ten sposób zawsze powoduje „kafelkowe” powielenie grafiki na stronie. Zobacz. Nieciekawie, prawda?
Tymczasem chcielibyśmy, aby obrazek pojawił się jako tło tylko raz, w określonym miejscu ekranu. To jest możliwe dzięki arkuszom stylów! demo032.html,,0,1 Fajne, prawda?
Zastosowanie arkuszy stylów do komponowania tła strony WWW niesie ze sobą rozliczne korzyści. Przede wszystkim projektant strony zyskuje większą kontrolę nad rozmieszczeniem elementów graficznych. W przeciwieństwie do tradycyjnego rozwiązania twórca strony może ustawiać graficzne elementy tła w pionie lub poziomie, ustawić graficzny motyw z lewej lub prawej strony ekranu albo pośrodku. Ale co w tym jest najciekawsze – arkusze stylów gwarantują pełną elastyczność przyjętych rozwiązań, zapewniają poprawne wyświetlenie wymyślnie zaprojektowanego tła niezależnie od wielkości okna przeglądarki czy rozdzielczości monitora.
Tradycyjne graficzne tła często zawierają „piksele-wypełniacze” pustej przestrzeni. Aczkolwiek takie GIF-y dobrze zazwyczaj się kompresują, jednak po wyświetleniu na ekranie użytkownika znacznie obciążają zasoby systemowe komputera. Dzięki arkuszom stylów do komponowania stron WWW możemy użyć grafiki o mniejszej powierzchni, co pozwala uchronić użytkowników przed niepotrzebnym i nadmiernym obciążeniem ich maszyn. Oto klika rozwiązań, które zilustrują powyższe uwagi.
Tło pośrodku ekranu
Chcemy ustawić tło strony tak, aby grafika była umieszczona na środku ekranu:
Tradycyjne rozwiązanie, wykorzystujące grafikę o dużych rozmiarach (np. 800/600px – rys.1), nie jest niestety elastyczne. Przy zmianie rozdzielczości ekranu do 1024/768px (rys. 2) centralny element rysunku „ucieka” w lewo i w górę a także powtarza się przy prawej i dolnej krawędzi ekranu. Przy rozdzielczości monitora 640/480px grafika przesuwa się w prawo i w dół; widoczna jest tylko część rysunku (rys. 3).
Rozwiązanie pokazane niżej gwarantuje, że obrazek, który ma być tłem, będzie zawsze wyświetlony centralnie niezależnie od rozdzielczości ekranu. Zobacz.
Tło na górze ekranu
Zamierzamy ustawić tło strony tak, aby grafika była umieszczona na górze ekranu. Chcemy wykorzystać pojedynczy animowany gif, który będzie ustawiony sąsiadująco w poziomie (repeat-x). Takie ustawienie chroni nas przed koniecznością tworzenia ogromnej grafiki, która sporo „waży”. Niezależnie od długości strony, przy jej przewijaniu, tło pozostanie stale widoczne. Zobacz.
Tło z boku
Możemy wykorzystać własność background-repeat: repeat-y do ustawienia graficznego marginesu dla strony. Arkusze stylów pozwalają zaoszczędzić zasoby systemowe komputera użytkownika, gdyż dzięki repeat-y nie musimy stosować szerokich gifów.
Dzięki tej własności skombinowanej z własnością background-position: 100% 0% możemy ustawić graficzny margines z prawej strony ekranu, co dotychczas było dość trudne ze względu na nieznajomość rozdzielczości monitora po stronie użytkownika.
Poniższy przykład polega na umieszczeniu tła na stronie wypełnionej tekstem. Strona składa się się z trzech bloków: w pierwszym tłem jest „głowica” kolumny, w trzecim – jej „baza”. Natomiast w drugim bloku tło składane jest z sąsiadującej w pionie grafiki (repeat-y), co sprawia, że otrzymujemy „trzon” o zmiennej wysokości – zależnej od objętości tekstu. Kolumna „nie rozpada się” nawet wtedy, gdy zmienimy rozmiar okna lub rozdzielczość ekranu.
<html>
<head>
<title>Pionowe tło w tabeli</title>
<style type="text/css">
<!--
/* tu jest miejsce na style dla tej tylko strony */
body { background-color: #ffffff; }
.bg1 {
background-color: transparent;
background-image: url(bg1.png);
background-repeat: no-repeat;
height: 38px;
}
.bg2 {
background-color: transparent;
background-image: url(bg2.png);
background-repeat: repeat-y;
height: auto;
}
.bg3 {
background-color: transparent;
background-image: url(bg3.png);
background-repeat: no-repeat;
height: 38px;
}
-->
</style>
</head>
<body>
<div class="bg1"> </div>
<div class="bg2">Lorem ipsum... </div>
<div class="bg3"> </div>
</body>
</html>Zastosowane w przykładach właściwości tła
