Tło może przesuwać się razem z zawartością strony, czyli tkwić nieruchomo w stosunku do tekstu, albo tkwić nieruchomo w stosunku do strony, czyli: tekst przesuwa się podczas przewijania strony w górę lub w dół, a tło pozostaje nieruchome na ekranie.
Efekt taki można bardzo łatwo uzyskać:
| body {background: url(nazwa_obrazka_z_rozszerzeniem); background-attachment:fixed} – tło będzie nieruchome w stosunku do strony |
Jeżeli chcielibyśmy ustawić tło przesuwające się razem z tekstem, to moglibyśmy nie pisać nic (tło domyślnie tkwi nieruchomo w stosunku do tekstu) lub napisać jako wartość polecenia background-attachment – scroll.
Zobacz przykłady:
Powtarzamy, czy nie?
Tło może się też powtarzać, bądź nie. Jeśli tło jest nieduże, to będzie na stronie widoczne w tylu kopiach ułożonych obok siebie, aż zapełni całą powierzchnię strony, oczywiście tylko w przypadku, kiedy ustawimy powtarzanie tła. Jeżeli nie pozwolimy mu się powatrzać, to bez względu na rozmiar, tło będzie występować na stronie tylko jeden raz. W takim razie, skoro tło nie powatrza się, a jest mniejsze niż powierzchnia strony, to trzeba je ustawić w którymś miejscu: na środku, po lewej stronie itp.
Ale zobaczmy najpierw przykłady:
Kody źródłowe przykładów:
| <style type=”text/css”> <!– body {background-repeat:no-repeat} – tło niepowtarzane –> </style> <style type=”text/css”> <style type=”text/css”> <style type=”text/css”> |
Pozycja tła
Nasze tło powatrza się lub nie. Ale co zrobić w sytuacji, kiedy tło się nie powtarza, ale nie zajmuje całej powierzchni strony? Wtedy trzeba ustalić jego pozycję. Pozycję definiujemy za pomocą polecenia background-position:wartość. Polecenie to może przyjmować różne wartości: top (góra), left (lewo), bottom (dół), right (prawo), center (środek). Można też zastosować definicje położenia poziomego i pionowego razem (np. top left), co w efekcie da ułożenie tła w którymś z rogów strony. Oczywiście wszystkie te rzeczy, które wyczyniamy z tłem można stosować także w tabelach itp. Wartością polecenia background-position mogą być także procenty (np. 80%) czy jednostki miary (np. 2,5cm). Tych wszystkich możliwości jest tak dużo, że nie sposób je tutaj wszystkie wymienić. Trzeba samemu popróbować różnych pozycji tła… Ja pokażę dwa przykłady: w pierwszym tło ustawione jest za pomocą top left, a w drugim za pomocą 80% 25%.
Zobacz przykłady:
Kody obu przykładów:
| <style type=”text/css”> <!– body {background: url(tlo.jpg); background-repeat:no-repeat; background-position: top left} –> </style> <style type=”text/css”> |
