Tlo strony
W tej czesci FAQ dowiecie sie prawie wszystkiego na temat tla Waszej strony lub bloga. Uwaga! Informacje tu podane nie dotycza tla tabelek. Jesli chcecie zmienic kolor tla calej tabelki lub jednej kolumny, zapraszam tutaj (punkt 4), natomiast jesli zechcecie zrobic tlo z tabelki w postaci powtarzajacych sie obrazkow, zapraszam tutaj (rowniez punkt 4).
ZMIANA KOLORU TLA - sposob 1
Jesli macie na blogu standardowy szablon, najlepiej zmienic kolor tla w Arkuszu stylow. Wtedy za jednym zamachem zmieni sie tez kolor tla w ksiedze gosci, na stronie z komentarzami itp. Na samym poczatku Arkusza stylow macie taki (lub podobny) fragment:
body { background-color: #FFFFFF;
Tu wlasnie ustalamy kolor tla. W przykladzie jest to kolor FFFFFF czyli bialy. Mozna go zmienic na dowolny inny kolor, tylko pamietajcie, by tekst byl czytelny! Kody kolorow mozna znalezc tutaj.
ZMIANA KOLORU TLA - sposob 2
Byc moze nie chcecie zmieniac tla z poziomu arkusza stylow (np. korzystacie z szablonu, ktory nie odwoluje sie do zewnetrznego Arkusza stylow). W takim wypadku istnieje jeszcze inna komenda, zmieniajaca kolor tla. Tym razem zmiana bedzie dotyczyc tylko tej strony, na ktorej te komende umiescicie, a nie wszystkich stron naraz.
Odszukajcie komende <body> (byc moze w nawiasie z komenda body macie juz wstawione, po spacji, inne atrybuty, takie jak vlink itd.). W tym samym nawiasie, po spacji, dodajemy atrybut bgcolor. Zatem, jesli na poczatku mieliscie:
<body>
to po wstawieniu koloru tla bedzie to wygladalo
tak:
<body
bgcolor="#FFFFFF">
- oczywiscie zamiast FFFFFF mozna wstawic dowolny inny kolor.
OBRAZEK JAKO TLO - wersja podstawowa
Jako tlo moze nam sluzyc takze obrazek (najczesciej GIF albo JPG), ktory znajduje sie na jakims serwerze (a nie na Waszym twardym dysku!). Istnieje komenda, wstawiajaca tlo z obrazka - w ten sposob, ze obrazek jest powielany, ukladany jeden obok drugiego, jeden nad drugim - tak jak glazura czy terakota ;) Aby wstawic takie tlo obrazkowe, nalezy do komendy <body> dodac atrybut background. Zatem aby wstawic obrazek o adresie http://obrazek.gif (oczywiscie Wy podacie poprawny adres!) na strone, wpisujemy:
<body background="http://obrazek.gif">
Przyklad: tutaj.
PORADA: Zeby strona wygladala profesjonalnie, warto "zgrac" ze soba kolor tla i obrazek z tla. Po co? Chodzi o to, ze jesli macie bialy tekst i ciemne tlo z obrazka, to zanim obrazek sie sciagnie, tekstu wcale nie widac. Wasi goscie musza czekac, az pojawi sie tlo i bedzie cokolwiek widac. A ci, ktorzy w ogole nie laduja sobie obrazkow, maja problem... W zwiazku z tym warto - oprocz obrazka - ustalic sobie takze kolor tla zblizony do kolorystyki obrazka. Kolor tla zaladuje sie natychmiast - i czytelnicy moga sobie spokojnie czytac, nie czekajac na zaladowanie sie obrazka, ktory pojawi sie pozniej.
Jak to zrobic? Mozna wstawic "normalnie" obrazek, a kolor dostosowac w Arkuszu stylow, a mozna wszystko zrobic za jednym zamachem, czyli:
<body bgcolor="#000000" background="http://obrazek.gif">
OBRAZEK JAKO TLO - wersja "unieruchomiona"
Mozna tak ustawic tlo, by bylo nieruchome, tzn. by nie przewijalo sie razem z tekstem. Sprawia to fajne wrazenie obrazka z tla jako zupelnie oddzielnej, dolnej warstwy. Do unieruchamiania obrazka sluzy atrybut bgproperties="fixed". Innymi slowy:
<body background="http://obrazek.gif" bgproperties="fixed">
Przyklad: tutaj.
OBRAZEK JAKO TLO - wersja zaawansowana
Istnieje wiele roznych sposobow wstawiania tla. mozna wstawic tlo w ten sposob, by nie powtarzalo sie w ogole (nie ukladalo sie jak glazura, tylko wyswietlalo sie pojedynczo), by powtarzalo sie tylko w pionie, tylko w poziomie... by bylo wyrownane do gory, do dolu, do prawej, do lewej, do srodka... jest naprawde wiele mozliwosci. Przedstawie tu podstawowe.
Zalozmy, ze jako tlo chcecie wstawic obrazek http://obrazek.gif. Wchodzicie zatem do Edytora HTML wybranej strony, odszukujecie komende </head> i wpisujecie PRZED nia:
<style>
body {
background-image: url(http://obrazek.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: left center;
}
</style>
W ten sposob uzyskacie taki efekt, ze obrazek nie powtarza sie (no-repeat), jest umieszczony "na stale" (nie przewija sie suwakiem, fixed) i wyrownany jest do lewej strony, na samym srodku (left center).
Przyklad: tutaj.
Co tu mozna zmienic?
background-repeat: no-repeat;
Zamiast no-repeat mozecie wpisac na przyklad repeat-x. W tym przypadku tlo bedzie sie powtarzalo, ale tylko w jedym rzadku. Mozecie tez wpisac repeat-y, tlo sie bedzie powtarzalo, ale tylko w jednej kolumnie. Jest tez oczywiscie opcja repeat, czyli standardowe powtarzanie, i w wierszu, i w kolumnie.
background-attachment: fixed;
Jesli usuniecie te linijke, tlo bedzie sie przesuwac razem z tekstem.
background-position: left center;
Tu mozna manipulowac z polozeniem tla. Zamiast left (wyrownanie do lewej) mozna wstawic right (wyrownanie do prawej) albo center (wysrodkowanie w poziomie). Natomiast zamiast drugiej zmiennej center (wysrodkowanie w pionie) mozna wstawic np. top (wyrownanie do gory) albo bottom (wyrownanie do dolu).
Przyklady:
1. Macie obrazek w postaci jednej sztachetki z plotu i chcecie zrobic tlo w postaci plotu, przez cala strone, na samym dole strony (czyli powtorzyc tylko w poziomie, a nie w pionie). Wpiszecie zatem:
<style>
body {
background-image: url(http://sztachetka.gif);
background-repeat: repeat-x;
background-position: left bottom;
}
</style>
Przyklad: tutaj.
2. Macie obrazek, ktory chcecie go wstawic na srodku, tak, by biegl przez cala strone i powtarzal sie tylko w pionie. Wpiszecie zatem:
<style>
body {
background-image: url(http://srodek.gif);
background-repeat: repeat-y;
background-position: center top;
}
</style>
Przyklad: tutaj.